Web开发教程：Kendo UI for jQuery数据管理——列模板

Kendo UI for jQuery R2 2020 SP1试用版下载

Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四个控件。Kendo UI for jQuery是创建现代Web应用程序的最完整UI库。

列模板

Kendo UI Grid呈现代表数据源项的表行（tr）。

有关可运行的示例，请参阅：

• Demo on using the row template of the Grid
• Demo on using the detail-row template of the Grid
• Demo on using the toolbar template of the Grid

每个表格行都包含代表Grid列的表格单元格（td）。 默认情况下，网格在列中显示字段的HTML编码值。

下面的示例演示如何自定义列显示其值的方式。

将列模板设置为字符串

下面的示例演示如何将模板设置为字符串并将列值包装在HTML中。

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [ {
field: "name",
template: "<strong>#: name # </strong>"
}],
dataSource: [ { name: "Jane Doe" }, { name: "John Doe" } ]
});
</script>

将列模板设置为函数

以下示例演示如何将模板设置为kendo.template返回的函数。

<div id="grid"></div>
<script id="name-template" type="text/x-kendo-template">
<strong>#: name #</strong>
</script>
<script>
$("#grid").kendoGrid({
columns: [ {
field: "name",
template: kendo.template($("#name-template").html())
}],
dataSource: [ { name: "Jane Doe" }, { name: "John Doe" } ]
});
</script>

下面的示例演示如何将模板设置为返回字符串的函数。

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [ {
field: "name",
template: function(dataItem) {
return "<strong>" + kendo.htmlEncode(dataItem.name) + "</strong>";
}
}],
dataSource: [ { name: "Jane Doe" }, { name: "John Doe" } ]
});
</script>

---

了解最新Kendo UI最新资讯，请关注Telerik中文网！