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

原创|使用教程|编辑:龚雪|2020-08-14 10:17:37.663|阅读 18 次

概述:Kendo UI for jQuery是创建现代Web应用程序的最完整UI库,本文Kendo UI Grid支持组模板,应用分组时,Grid的分组行将数据行组织为树形结构。

# 正版采购狂欢节,企业采购正当时 #

相关链接:

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

组模板

应用分组时,Grid的分组行将数据行组织为树形结构。

有关可运行的示例,请参阅:

组行显示组摘要值,并包含展开和折叠组图标,这些图标使用户可以展开(显示子行)和折叠(隐藏子行)组行。 Grid提供以下模板,可以用于自定义组行的外观:

  • GroupHeaderTemplate - 为整个组行渲染一个模板。 通常主要目的是显示有关整个组的信息,默认情况下如果您未定义模板,那么将显示字段名称和当前组值。
  • GroupHeaderColumnTemplate - 在与行本身对齐的组行中渲染模板。 通常它在当前组的上下文中显示特定列的合计值,模板内容在视觉上显示为与列本身对齐。
  • GroupFooterTemplate - 在与该列对齐的组页脚行中渲染模板,与组页脚行的groupHeaderColumnTemplate相似。

如果未定义模板,则以以下方式显示字段名称和当前组。

图1:没有组模板的网格

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

使用GroupHeaderTemplate的唯一区别是模板内容是编译和显示的,而不是字段和当前组的值。 GroupHeaderColumnTemplate和GroupFooterTemplate的工作方式相似。

GroupHeaderColumnTemplate将内容显示为与组行中的列对齐。 GroupFooterTemplate将内容显示为与组页脚行中的列对齐。 它们的内容显示为与列对齐,如下所示。

图2:具有定义的组头和组脚模板的网格

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

因为GroupHeaderTemplate显示在组行的扩展图标旁边,所以它优先于第一个可见列的GroupHeaderColumnTemplate。 若要显示Grid第一列的GroupHeaderColumnTemplate内容,请不要为group列设置GroupHeaderTemplate。 下面的网格配置演示了对Units In Stock列的GroupHeaderTemplate进行注释,会显示Product Name列的GroupHeaderColumnTemplate。

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
},

pageSize: 7,
group: {
field: "UnitsInStock", aggregates: [
{ field: "ProductName", aggregate: "count" },
{ field: "UnitsInStock", aggregate: "min" }
]
},

aggregate: [ { field: "ProductName", aggregate: "count" },
{ field: "UnitsInStock", aggregate: "min" }]
},

columns: [
{ field: "ProductName", title: "Product Name",
aggregates: ["count"],
groupHeaderColumnTemplate: "Count: #=count#", width: 300
},
{ field: "UnitPrice", title: "Unit Price" },
{ field: "UnitsOnOrder", title: "Units On Order" },
{ field: "UnitsInStock", title: "Units In Stock", aggregates: ["min"],
//groupHeaderTemplate: "Min: #= min #", width: 500
}
]
});
</script>


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


了解最新Kendo UI最新资讯,请关注Telerik中文网!

慧都高端UI界面开发


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,尊重他人劳动成果

文章转载自:慧都网

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
title
相关厂商
相关产品
Kendo UI

全新升级的Kendo UI,是创建数据丰富的Web应用程序的最完整UI库。

Kendo UI for jQuery

完整的jQuery UI组件库,可快速构建出色的高性能响应式Web应用程序。

在线
客服
咨询
电话
400-700-1020
在线
QQ
购物车 反馈 返回
顶部
在线客服系统
live chat