国产v在线观看,无码极品,日韩在线观看中文字幕

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庫(kù)，本教程主要為大家介紹Kendo UI for jQuery數(shù)據(jù)管理中的分組功能。

# 界面/圖表報(bào)表/文檔/IDE等千款熱門(mén)軟控件火熱銷售中 >>

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的分組功能。

入門(mén)指南

要啟用分組，請(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'>&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>"
});
});

與分頁(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)及最新資訊