Kendo UI for jQuery數(shù)據(jù)管理使用教程：分組
Kendo UI for jQuery R3 2019 SP1試用版下載
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應用程序的最完整UI庫。
默認情況下，禁用Kendo UI Grid的分組功能。
入門指南
要啟用分組，請將groupable選項設置為true。 結果網(wǎng)格在其標題中公開一個新的區(qū)域，使用戶可以按列隊網(wǎng)格數(shù)據(jù)進行分組。要將數(shù)據(jù)按多列分組，用戶可以將所需的列拖到分組標題中。
$("#grid").kendoGrid({
groupable: true
// Other configuration.
});
要對分組內(nèi)容進行排序，請單擊分組標簽。要切換上一個示例中分組數(shù)據(jù)的排序順序，請單擊Name。通過單擊相應標題組旁邊的箭頭，也可以將每個單獨的組從其展開狀態(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 += "<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>"
});
});
與分頁一起使用
當您將分組與分頁一起使用時，分頁發(fā)生在分組之前，結果是：
- dataSource實例不知道顯示組中的項目在其他頁面上是否可用。
- 如果組已折疊，則無法在已渲染的項目和組之后顯示其他頁面上的其他項目和組。 要變通解決此問題，請增加頁面大小。
要使網(wǎng)格能夠在分頁之前執(zhí)行分組，請對整個數(shù)據(jù)源進行分組。 但是在這種情況下，網(wǎng)格的性能將降低。
合計
通過網(wǎng)格，您可以在用戶對數(shù)據(jù)進行分組時顯示匯總的結果。若要使用聚合功能啟用分組，請使用Grid的聚合，groupFooterTemplate，groupHeaderColumnTemplate或footerTemplate設置以及其數(shù)據(jù)源的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>
了解最新Kendo UI最新資訊，請關注Telerik中文網(wǎng)！
掃描關注慧聚IT微信公眾號，及時獲取最新動態(tài)及最新資訊
QQ交談
在線咨詢
渝公網(wǎng)安備
50010702500608號
提供CDN加速/云存儲服務
客服熱線