Kendo UI for jQuery數據管理使用教程：分組
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是創建現代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: "http://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>
掃描關注慧聚IT微信公眾號，及時獲取最新動態及最新資訊
QQ交談
在線咨詢
渝公網安備
50010702500608號
客服熱線