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

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

DevExtreme v22.1正式版下載

默認(rèn)模板

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

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 }
];

您可以使用支持默認(rèn)模板和自定義模板的dxItem組件在標(biāo)記中實(shí)現(xiàn)同樣的效果，在這種情況下，不要設(shè)置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({/* ... */});
});

默認(rèn)模板和其中可用的字段取決于UI組件。

自定義模板

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

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

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

下面的代碼展示了如何聲明模板并使用這些參數(shù)，段代碼為L(zhǎng)ist UI組件聲明了一個(gè)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);
}
});
});

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

集合UI組件還支持單個(gè)項(xiàng)的模板，如果使用單獨(dú)的模板，不要指定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支持以下開箱即用的模板引擎：

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

HTML

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

JavaScript

DevExpress.setTemplateEngine("underscore");

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

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

DevExpress技術(shù)交流群6：600715373      歡迎一起進(jìn)群討論