DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現(xiàn)代Web開發(fā)堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構建交互式的Web應用程序，該套件附帶功能齊全的數(shù)據(jù)網(wǎng)格、交互式圖表小部件、數(shù)據(jù)編輯器等。

模板允許您自定義DevExtreme UI組件，本文概述DevExtreme為實現(xiàn)和應用模板提供的功能。

DevExtreme v22.1正式版下載

默認模板

默認模板基于數(shù)據(jù)源字段，可以通過從數(shù)據(jù)源對象中添加或刪除特定字段來控制外觀。例如，List UI組件項的默認模板包含文本、可見和禁用字段等，如果您將以下數(shù)組分配給UI組件項或dataSource屬性，第一項將被禁用，第二項將被隱藏，它們都將有文本，而第三項將呈現(xiàn)自定義標記：

JavaScript

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

您可以使用支持默認模板和自定義模板的dxItem組件在標記中實現(xiàn)同樣的效果，在這種情況下，不要設置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>Oranges</i>
</div>
</div>

JavaScript

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

默認模板和其中可用的字段取決于UI組件。

自定義模板

模板作為屬性傳遞，其結(jié)尾是...Template（在jQuery, Angular,Vue中）或...Render/...Component (在React中)。

每個模板都可以訪問以下參數(shù)：

• data：數(shù)據(jù)源對象或具有特定于特定模板的字段對象。
• index：集合中的項目從零開始的索引，僅在集合UI組件模板中可用。
• element：一個jQuery元素，表示正在自定義的UI組件元素，僅當您使用jQuery時可用。

下面的代碼展示了如何聲明模板并使用這些參數(shù)，段代碼為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 = $("<div>").text(
index + " - " + data.itemProperty
);
element.append($item);
}
});
});

注意：在組件的標記內(nèi)，但在模板元素之外聲明命名模板，非命名模板應該在模板元素中聲明。

集合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支持以下開箱即用的模板引擎：

要使用其中一個，將它的名稱傳遞給方法：

HTML

<div id="list"></div>
<script type="text/html" id="itemTemplate">
<!-- your Underscore template -->
</script>

JavaScript

DevExpress.setTemplateEngine("underscore");

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

還可以使用其他模板引擎，但在本示例中需要實現(xiàn)編譯和呈現(xiàn)模板的函數(shù)，詳見 。

DevExpress技術交流群6：600715373      歡迎一起進群討論