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

默認(rèn)情況下，禁用Kendo UI Grid的分組功能。

 

入門指南

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

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

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

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

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

 

與行模板一起使用

行模板明確定義行標(biāo)記，而分組要求您更改行標(biāo)記。要同時(shí)使用這兩個(gè)功能，請?jiān)谛心０逯邪粋€(gè)腳本，該腳本根據(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’) #” +
“………”
});
});

 

與分頁一起使用

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

• dataSource實(shí)例不知道顯示組中的項(xiàng)目在其他頁面上是否可用。

• 如果組已折疊，則無法在已渲染的項(xiàng)目和組之后顯示其他頁面上的其他項(xiàng)目和組。 要變通解決此問題，請?jiān)黾禹撁娲笮　?/p>

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

 

合計(jì)

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