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四個(gè)控件。Kendo UI for jQuery是創(chuàng)建現(xiàn)代Web應(yīng)用程序的最完整UI庫(kù)。
默認(rèn)情況下，禁用Kendo UI Grid的分組功能。
入門指南
要啟用分組，請(qǐng)將groupable選項(xiàng)設(shè)置為true。 結(jié)果網(wǎng)格在其標(biāo)題中公開(kāi)一個(gè)新的區(qū)域，使用戶可以按列隊(duì)網(wǎng)格數(shù)據(jù)進(jìn)行分組。要將數(shù)據(jù)按多列分組，用戶可以將所需的列拖到分組標(biāo)題中。
$("#grid").kendoGrid({
groupable: true
// Other configuration.
});
要對(duì)分組內(nèi)容進(jìn)行排序，請(qǐng)單擊分組標(biāo)簽。要切換上一個(gè)示例中分組數(shù)據(jù)的排序順序，請(qǐng)單擊Name。通過(guò)單擊相應(yīng)標(biāo)題組旁邊的箭頭，也可以將每個(gè)單獨(dú)的組從其展開(kāi)狀態(tài)切換到折疊狀態(tài)。
圖1：?jiǎn)⒂梅纸M功能的網(wǎng)格
圖2：數(shù)據(jù)按姓氏分組的網(wǎng)格
與行模板一起使用
行模板明確定義行標(biāo)記，而分組要求您更改行標(biāo)記。要同時(shí)使用這兩個(gè)功能，請(qǐng)?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 += "<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>"
});
});
與分頁(yè)一起使用
當(dāng)您將分組與分頁(yè)一起使用時(shí)，分頁(yè)發(fā)生在分組之前，結(jié)果是：
- dataSource實(shí)例不知道顯示組中的項(xiàng)目在其他頁(yè)面上是否可用。
- 如果組已折疊，則無(wú)法在已渲染的項(xiàng)目和組之后顯示其他頁(yè)面上的其他項(xiàng)目和組。 要變通解決此問(wèn)題，請(qǐng)?jiān)黾禹?yè)面大小。
要使網(wǎng)格能夠在分頁(yè)之前執(zhí)行分組，請(qǐng)對(duì)整個(gè)數(shù)據(jù)源進(jìn)行分組。 但是在這種情況下，網(wǎng)格的性能將降低。
合計(jì)
通過(guò)網(wǎng)格，您可以在用戶對(duì)數(shù)據(jù)進(jìn)行分組時(shí)顯示匯總的結(jié)果。若要使用聚合功能啟用分組，請(qǐng)使用Grid的聚合，groupFooterTemplate，groupHeaderColumnTemplate或footerTemplate設(shè)置以及其數(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: "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>
掃描關(guān)注慧聚IT微信公眾號(hào)，及時(shí)獲取最新動(dòng)態(tài)及最新資訊
QQ交談
在線咨詢
渝公網(wǎng)安備
50010702500608號(hào)
客服熱線