彩票走势图

Kendo UI for jQuery数据管理使用教程:列模板

翻译|使用教程|编辑:龚雪|2020-08-19 10:51:08.283|阅读 176 次

概述:Kendo UI for jQuery是创建现代Web应用程序的最完整UI库,本文Kendo UI Grid支持列模板,欢迎下载新版体验。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

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

Kendo UI目前最新提供Kendo UI for jQueryKendo UI for AngularKendo UI Support for ReactKendo 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>


慧都高端UI界面开发

标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:慧都网

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP