Web开发中Kendo UI for jQuery数据管理列模板是怎样的

Web开发中Kendo UI for jQuery数据管理列模板是怎样的，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

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>

关于Web开发中Kendo UI for jQuery数据管理列模板是怎样的问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注亿速云行业资讯频道了解更多相关知识。