Web UI开发神器—Kendo UI for jQuery数据管理之分组-编程知识-夕阳导航

点击“了解更多”获取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的分组功能。

入门指南

要启用分组，请将groupable选项设置为true。结果网格在其标题中公开一个新的区域，使用户可以按列队网格数据进行分组。要将数据按多列分组，用户可以将所需的列拖到分组标题中。

$("#grid").kendoGrid({
groupable: true
// Other configuration.
});

要对分组内容进行排序，请单击分组标签。要切换上一个示例中分组数据的排序顺序，请单击Name。通过单击相应标题组旁边的箭头，也可以将每个单独的组从其展开状态切换到折叠状态。

图1：启用分组功能的网格

图2：数据按姓氏分组的网格

与行模板一起使用

行模板明确定义行标记，而分组要求您更改行标记。要同时使用这两个功能，请在行模板中包含一个脚本，该脚本根据现有组的数量添加其他单元格。

$(document).ready(function () {
// window. can be omitted if the function is defined outside the document.ready closure.
window.getGridGroupCells = function(id) {
var cnt = $("#" + id).data("kendoGrid").dataSource.group().length,
result = "";

for (var j = 0; j < cnt; j++) {
result += "<td class='k-group-cell'> </td>";
}

return result;
}

$("#GridID").kendoGrid({
groupable: true,
rowTemplate: "<tr>" +
"#= getGridGroupCells('GridID') #" +
"<td>...</td><td>...</td><td>...</td></tr>",
altRowTemplate: "<tr class='k-alt'>" +
"#= getGridGroupCells('GridID') #" +
"<td>...</td><td>...</td><td>...</td></tr>"
});
});

与分页一起使用

当您将分组与分页一起使用时，分页发生在分组之前，结果是：

dataSource实例不知道显示组中的项目在其他页面上是否可用。
如果组已折叠，则无法在已渲染的项目和组之后显示其他页面上的其他项目和组。要变通解决此问题，请增加页面大小。

要使网格能够在分页之前执行分组，请对整个数据源进行分组。但是在这种情况下，网格的性能将降低。

合计

通过网格，您可以在用户对数据进行分组时显示汇总的结果。若要使用聚合功能启用分组，请使用Grid的聚合，groupFooterTemplate，groupHeaderColumnTemplate或footerTemplate设置以及其数据源的group和聚合字段。

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="styles/kendo.common.min.css" />
<link rel="stylesheet" href="styles/kendo.default.min.css" />
<link rel="stylesheet" href="styles/kendo.default.mobile.min.css" />

<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>

</head>
<body>

<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
},
schema:{
model: {
fields: {
UnitsInStock: { type: "number" },
ProductName: { type: "string" },
UnitPrice: { type: "number" },
UnitsOnOrder: { type: "number" },
UnitsInStock: { type: "number" }
}
}
},
pageSize: 7,
group: {
field: "UnitsInStock", aggregates: [
{ field: "ProductName", aggregate: "count" },
{ field: "UnitPrice", aggregate: "sum"},
{ field: "UnitsOnOrder", aggregate: "average" },
{ field: "UnitsInStock", aggregate: "count" }
]
},

aggregate: [ { field: "ProductName", aggregate: "count" },
{ field: "UnitPrice", aggregate: "sum" },
{ field: "UnitsOnOrder", aggregate: "average" },
{ field: "UnitsInStock", aggregate: "min" },
{ field: "UnitsInStock", aggregate: "max" }]
},
sortable: true,
scrollable: false,
pageable: true,
columns: [
{ field: "ProductName", title: "Product Name", aggregates: ["count"], footerTemplate: "Total Count: #=count#", groupFooterTemplate: "Count: #=count#" },
{ field: "UnitPrice", title: "Unit Price", aggregates: ["sum"], groupHeaderColumnTemplate: "Sum: #=sum#" },
{ field: "UnitsOnOrder", title: "Units On Order", aggregates: ["average"], footerTemplate: "Average: #=average#",
groupFooterTemplate: "Average: #=average#" },
{ field: "UnitsInStock", title: "Units In Stock", aggregates: ["min", "max", "count"], footerTemplate: "<div>Min: #= min #</div><div>Max: #= max #</div>",
groupHeaderTemplate: "Units In Stock: #= value # (Count: #= count#)" }
]
});
});
</script>
</div>

</body>
</html>