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

 

组模板

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

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

GroupHeaderTemplate – 为整个组行渲染一个模板。 通常主要目的是显示有关整个组的信息，默认情况下如果您未定义模板，那么将显示字段名称和当前组值。

GroupHeaderColumnTemplate – 在与行本身对齐的组行中渲染模板。 通常它在当前组的上下文中显示特定列的合计值，模板内容在视觉上显示为与列本身对齐。

GroupFooterTemplate – 在与该列对齐的组页脚行中渲染模板，与组页脚行的groupHeaderColumnTemplate相似。

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

 

图1：没有组模板的网格

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

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

 

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

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