DevExtreme拥有高性能的HTML5 / JavaScript小部件集合使您可以利用现代Web开发堆栈包括ReactAngularASP.NET CorejQueryKnockout等构建交互式的Web应用程序该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。模板允许您自定义DevExtreme UI组件本文概述DevExtreme为实现和应用模板提供的功能。DevExtreme新旧版本帮助文档下载可进QQ qun获取169725316默认模板默认模板基于数据源字段可以通过从数据源对象中添加或删除特定字段来控制外观。例如List UI组件项的默认模板包含文本、可见和禁用字段等如果您将以下数组分配给UI组件项或dataSource属性第一项将被禁用第二项将被隐藏它们都将有文本而第三项将呈现自定义标记JavaScriptfunction customMarkup() { var d document.createElement(div); d.innerHTML iOranges/i; return d; } var fruits [ { text: Apples, disabled: true }, { text: Lemons, visible: false }, { template: customMarkup } ];您可以使用支持默认模板和自定义模板的dxItem组件在标记中实现同样的效果在这种情况下不要设置UI组件的dataSource属性。HTMLdiv idlist div>$(function() { $(#list).dxList({/* ... */}); });默认模板和其中可用的字段取决于UI组件。自定义模板模板作为属性传递其结尾是...Template在jQuery, Angular,Vue中或...Render/...Component (在React中)。每个模板都可以访问以下参数data数据源对象或具有特定于特定模板的字段对象。index集合中的项目从零开始的索引仅在集合UI组件模板中可用。element一个jQuery元素表示正在自定义的UI组件元素仅当您使用jQuery时可用。下面的代码展示了如何声明模板并使用这些参数段代码为List UI组件声明了一个itemTemplateindex.js$(function() { $(#listContainer).dxList({ items: [ { itemProperty: someValue }, // ... ], itemTemplate: function (data, index, element) { return index - data.itemProperty; // or using the element parameter const $item $(div).text( index - data.itemProperty ); element.append($item); } }); });注意在组件的标记内但在模板元素之外声明命名模板非命名模板应该在模板元素中声明。集合UI组件还支持单个项的模板如果使用单独的模板不要指定UI组件的dataSource属性。index.js$(function() { $(#listContainer).dxList({ items: [{ template: function () { return $(i).text(Item 1) } }, { template: function () { return $(b).text(Item 2) } },{ template: function () { return $(div).append( $(span).text(Item with nested component), $(div).dxButton({ text: Click me }) ) } }] }); });第三方模板引擎可以使用第三方模板引擎但只能使用jQuery. DevExtreme支持以下开箱即用的模板引擎UnderscoreJsRenderMustacheHoganHandlebarsdoT要使用其中一个将它的名称传递给DevExpress.setTemplateEngine(name)方法HTMLdiv idlist/div script typetext/html iditemTemplate !-- your Underscore template -- /scriptJavaScriptDevExpress.setTemplateEngine(underscore); $(function() { $(#list).dxList({ // ... itemTemplate: $(#itemTemplate) }); })还可以使用其他模板引擎但在本示例中需要实现编译和呈现模板的函数详见DevExpress.setTemplateEngine(options) 。