分组概述
默认情况下，Grid的分组功能是禁用的。
有关显示聚合结果的更多信息，请参阅使用聚合分组。
分组是的一部分jQuery的剑道UI一个专业级的UI库，包含 110+ 组件，用于构建现代和功能丰富的 应用程序。要想尝试一下，注册一个30天的免费试用。
开始
若要启用分组，请设置groupable选项真正的。因此，Grid在其标题中公开了一个新区域，允许用户按列对Grid数据进行分组。若要按多列对数据进行分组，用户可以将所需的列拖到分组标头中。
$(" #网格”)。kendoGrid({groupable: true) //其他配置。}）;要对分组内容进行排序，请单击分组选项卡。若要切换前一个示例中分组数据的排序顺序，请单击姓。还可以通过单击各自标题组旁边的箭头，将每个单独的组从展开状态切换到折叠状态。
图1:启用了分组功能的网格
图2:数据按姓氏分组的网格
只有列绑定到一个字段可以分组。若要在绑定到对象的列上启用分组，请将列绑定到该对象的字段。
使用行模板
行模板显式定义行标记，而分组要求更改行标记。要同时使用这两个特性，请在行模板中包含一个脚本，该脚本根据现有组的数量添加额外的单元格。
美元(文档)。Ready (function(){//窗口。如果函数在文档之外定义，则可以省略。准备关闭。窗口。getGridGroupCells = function(id) {var cnt = $("#" + id).data("kendoGrid"). datasource .group()。长度，result = "";For (var j = 0;J < font =宋体;j + +){结果+ =”< td类=“k-group-cell”>,< / td >”;}返回结果;} $ (" # GridID”)。kendoGrid({ groupable: true, rowTemplate: "" + "#= getGridGroupCells('GridID') #" + "... ... ... ", altRowTemplate: "" + "#= getGridGroupCells('GridID') #" + "... ... ... " }); });使用分页
将分组与分页一起使用时，会在分组之前进行分页。结果是:
- 的
数据源实例不知道显示组中的项是否在其他页面上可用。 - 如果折叠组，则无法在呈现的项和组之后显示其他页面中的其他项和组。要解决此问题，请增大页面大小。
要使Grid在分页之前执行分组，请对整个数据源进行分组。然而，在这种情况下，网格的性能将会降低。
隐藏分组列
从R3 2022开始，Kendo UI Grid允许开发人员从网格中隐藏分组列。此功能可防止网格和组标头中的数据重复。
若要允许自动隐藏分组列，请设置[columns.hideOnGroup) (/ api / javascript / ui /网格/配置/列。将group属性更改为真正的。
注意:当用户应用分组时，网格的这个功能就会起作用。的hideOnGroup如果将分组直接应用于dataSource配置，则属性将不起任何作用。
有关可运行示例，请访问隐藏分组列演示。