Kendo UI for jQuery數(shù)據(jù)管理使用教程：列模板

---

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四個(gè)控件。Kendo UI for jQuery是創(chuàng)建現(xiàn)代Web應(yīng)用程序的最完整UI庫(kù)。

列模板

Kendo UI Grid呈現(xiàn)代表數(shù)據(jù)源項(xiàng)的表行（tr）。

有關(guān)可運(yùn)行的示例，請(qǐng)參閱：

• 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

每個(gè)表格行都包含代表Grid列的表格單元格（td）。 默認(rèn)情況下，網(wǎng)格在列中顯示字段的HTML編碼值。

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

將列模板設(shè)置為字符串

下面的示例演示如何將模板設(shè)置為字符串并將列值包裝在HTML中。

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

將列模板設(shè)置為函數(shù)

以下示例演示如何將模板設(shè)置為kendo.template返回的函數(shù)。

<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>

下面的示例演示如何將模板設(shè)置為返回字符串的函數(shù)。

<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最新資訊，請(qǐng)關(guān)注Telerik中文網(wǎng)！