Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四個控件。Kendo UI for jQuery是創(chuàng)建現(xiàn)代Web應(yīng)用程序的完整UI庫。

默認情況下，禁用Kendo UI Grid的分組功能。

 

入門指南

要啟用分組，請將groupable選項設(shè)置為true。 結(jié)果網(wǎng)格在其標題中公開一個新的區(qū)域，使用戶可以按列隊網(wǎng)格數(shù)據(jù)進行分組。要將數(shù)據(jù)按多列分組，用戶可以將所需的列拖到分組標題中。

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

要對分組內(nèi)容進行排序，請單擊分組標簽。要切換上一個示例中分組數(shù)據(jù)的排序順序，請單擊Name。通過單擊相應(yīng)標題組旁邊的箭頭，也可以將每個單獨的組從其展開狀態(tài)切換到折疊狀態(tài)。

圖1：啟用分組功能的網(wǎng)格

圖2：數(shù)據(jù)按姓氏分組的網(wǎng)格

 

與行模板一起使用

行模板明確定義行標記，而分組要求您更改行標記。要同時使用這兩個功能，請在行模板中包含一個腳本，該腳本根據(jù)現(xiàn)有組的數(shù)量添加其他單元格。

$(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 += “ ”;
}

return result;
}

$(“#GridID”).kendoGrid({
groupable: true,
rowTemplate: “” +
“#= getGridGroupCells(‘GridID’) #” +
“………”,
altRowTemplate: “” +
“#= getGridGroupCells(‘GridID’) #” +
“………”
});
});

 

與分頁一起使用

當您將分組與分頁一起使用時，分頁發(fā)生在分組之前，結(jié)果是：

• dataSource實例不知道顯示組中的項目在其他頁面上是否可用。

• 如果組已折疊，則無法在已渲染的項目和組之后顯示其他頁面上的其他項目和組。 要變通解決此問題，請增加頁面大小。

要使網(wǎng)格能夠在分頁之前執(zhí)行分組，請對整個數(shù)據(jù)源進行分組。 但是在這種情況下，網(wǎng)格的性能將降低。

 

合計

通過網(wǎng)格，您可以在用戶對數(shù)據(jù)進行分組時顯示匯總的結(jié)果。若要使用聚合功能啟用分組，請使用Grid的聚合，groupFooterTemplate，groupHeaderColumnTemplate或footerTemplate設(shè)置以及其數(shù)據(jù)源的group和聚合字段。