界面控件DevExtreme中文使用指南——如何构建 & 应用模板

DevExtreme拥有高性能的HTML5 / JavaScript小部件集合，使您可以利用现代Web开发堆栈（包括React，Angular，ASP.NET Core，jQuery，Knockout等）构建交互式的Web应用程序，该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。

模板允许您自定义DevExtreme UI组件，本文概述DevExtreme为实现和应用模板提供的功能。

DevExtreme v22.1正式版下载

默认模板

默认模板基于数据源字段，可以通过从数据源对象中添加或删除特定字段来控制外观。例如，List UI组件项的默认模板包含文本、可见和禁用字段等，如果您将以下数组分配给UI组件项或dataSource属性，第一项将被禁用，第二项将被隐藏，它们都将有文本，而第三项将呈现自定义标记：

JavaScript

function customMarkup() {
var d = document.createElement("div");
d.innerHTML = "Oranges";
return d;
}
var fruits = [
{ text: "Apples", disabled: true },
{ text: "Lemons", visible: false },
{ template: customMarkup }
];

您可以使用支持默认模板和自定义模板的dxItem组件在标记中实现同样的效果，在这种情况下，不要设置UI组件的dataSource属性。

HTML

<div id="list">
<div data-options="dxItem: { text: 'Apples', disabled: true }">div>
<div data-options="dxItem: { text: 'Lemons', visible: false }">div>
<div data-options="dxItem: { }">
<i>Orangesi>
div>
div>

JavaScript

$(function() {
$("#list").dxList({/* ... */});
});

默认模板和其中可用的字段取决于UI组件。

自定义模板

模板作为属性传递，其结尾是...Template（在jQuery, Angular,Vue中）或...Render/...Component (在React中)。

每个模板都可以访问以下参数：

• data：数据源对象或具有特定于特定模板的字段对象。
• index：集合中的项目从零开始的索引，仅在集合UI组件模板中可用。
• element：一个jQuery元素，表示正在自定义的UI组件元素，仅当您使用jQuery时可用。

下面的代码展示了如何声明模板并使用这些参数，段代码为List UI组件声明了一个itemTemplate：

index.js

$(function() {
$("#listContainer").dxList({
items: [
{ itemProperty: "someValue" },
// ...
],
itemTemplate: function (data, index, element) {
return index + " - " + data.itemProperty;
 
// ===== or using the "element" parameter =====
const $item = $("
").text(
index + " - " + data.itemProperty
);
element.append($item);
}
});
});

注意：在组件的标记内，但在模板元素之外声明命名模板，非命名模板应该在模板元素中声明。

集合UI组件还支持单个项的模板，如果使用单独的模板，不要指定UI组件的dataSource属性。

index.js

$(function() {
$("#listContainer").dxList({
items: [{
template: function () {
return $("").text("Item 1")
}
}, {
template: function () {
return $("").text("Item 2")
}
},{
template: function () {
return $("
").append(
$("").text("Item with nested component"),
$("
").dxButton({
text: "Click me"
})
)
}
}]
});
});

<div id="list">div>
<script type="text/html" id="itemTemplate">
script>

DevExpress.setTemplateEngine("underscore");
 
$(function() {
$("#list").dxList({
// ...
itemTemplate: $("#itemTemplate")
});
})