国产伦精品一,成人永久免费高清,国产精品日本亚洲欧美

Kendo UI for jQuery數(shù)據(jù)管理使用教程：分組

原創(chuàng)|使用教程|編輯：龔雪|2019-12-31 09:45:44.953|閱讀 411 次

概述：Kendo UI for jQuery是創(chuàng)建現(xiàn)代Web應(yīng)用程序的最完整UI庫，本教程主要為大家介紹Kendo UI for jQuery數(shù)據(jù)管理中的分組功能。

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)格在其標(biāo)題中公開一個新的區(qū)域，使用戶可以按列隊網(wǎng)格數(shù)據(jù)進行分組。要將數(shù)據(jù)按多列分組，用戶可以將所需的列拖到分組標(biāo)題中。

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

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

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

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

與行模板一起使用

行模板明確定義行標(biāo)記，而分組要求您更改行標(biāo)記。要同時使用這兩個功能，請在行模板中包含一個腳本，該腳本根據(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'>&nbsp;</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>"
});
});

與分頁一起使用

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

dataSource實例不知道顯示組中的項目在其他頁面上是否可用。
如果組已折疊，則無法在已渲染的項目和組之后顯示其他頁面上的其他項目和組。要變通解決此問題，請增加頁面大小。

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

合計

通過網(wǎng)格，您可以在用戶對數(shù)據(jù)進行分組時顯示匯總的結(jié)果。若要使用聚合功能啟用分組，請使用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微信公眾號，及時獲取最新動態(tài)及最新資訊