当前位置: 首页 > 工具软件 > DevExtreme > 使用案例 >

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

融焕
2023-12-01

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 = "<i>Oranges</i>";
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>Oranges</i>
</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 = $("<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支持以下开箱即用的模板引擎:

要使用其中一个,将它的名称传递给DevExpress.setTemplateEngine(name)方法:

HTML

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

JavaScript

DevExpress.setTemplateEngine("underscore");

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

还可以使用其他模板引擎,但在本示例中需要实现编译和呈现模板的函数,详见DevExpress.setTemplateEngine(options) 。

 类似资料: