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

有關可運行的示例，請參閱：

 每個表格行都包含代表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>

---