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

---

Kendo UI for jQuery R2 2020 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ù)。

組模板

應(yīng)用分組時(shí)，Grid的分組行將數(shù)據(jù)行組織為樹形結(jié)構(gòu)。

有關(guān)可運(yùn)行的示例，請(qǐng)參閱：

• Demo on using the row template of the Grid
• Demo on using the detail-row template of the Grid
• Demo on using the toolbar template of the Grid

組行顯示組摘要值，并包含展開和折疊組圖標(biāo)，這些圖標(biāo)使用戶可以展開（顯示子行）和折疊（隱藏子行）組行。 Grid提供以下模板，可以用于自定義組行的外觀：

• GroupHeaderTemplate - 為整個(gè)組行渲染一個(gè)模板。 通常主要目的是顯示有關(guān)整個(gè)組的信息，默認(rèn)情況下如果您未定義模板，那么將顯示字段名稱和當(dāng)前組值。
• GroupHeaderColumnTemplate - 在與行本身對(duì)齊的組行中渲染模板。 通常它在當(dāng)前組的上下文中顯示特定列的合計(jì)值，模板內(nèi)容在視覺(jué)上顯示為與列本身對(duì)齊。
• GroupFooterTemplate - 在與該列對(duì)齊的組頁(yè)腳行中渲染模板，與組頁(yè)腳行的groupHeaderColumnTemplate相似。

如果未定義模板，則以以下方式顯示字段名稱和當(dāng)前組。

圖1：沒(méi)有組模板的網(wǎng)格

使用GroupHeaderTemplate的唯一區(qū)別是模板內(nèi)容是編譯和顯示的，而不是字段和當(dāng)前組的值。 GroupHeaderColumnTemplate和GroupFooterTemplate的工作方式相似。

GroupHeaderColumnTemplate將內(nèi)容顯示為與組行中的列對(duì)齊。 GroupFooterTemplate將內(nèi)容顯示為與組頁(yè)腳行中的列對(duì)齊。 它們的內(nèi)容顯示為與列對(duì)齊，如下所示。

圖2：具有定義的組頭和組腳模板的網(wǎng)格

因?yàn)镚roupHeaderTemplate顯示在組行的擴(kuò)展圖標(biāo)旁邊，所以它優(yōu)先于第一個(gè)可見列的GroupHeaderColumnTemplate。 若要顯示Grid第一列的GroupHeaderColumnTemplate內(nèi)容，請(qǐng)不要為group列設(shè)置GroupHeaderTemplate。 下面的網(wǎng)格配置演示了對(duì)Units In Stock列的GroupHeaderTemplate進(jìn)行注釋，會(huì)顯示Product Name列的GroupHeaderColumnTemplate。

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
},

pageSize: 7,
group: {
field: "UnitsInStock", aggregates: [
{ field: "ProductName", aggregate: "count" },
{ field: "UnitsInStock", aggregate: "min" }
]
},

aggregate: [ { field: "ProductName", aggregate: "count" },
{ field: "UnitsInStock", aggregate: "min" }]
},

columns: [
{ field: "ProductName", title: "Product Name",
aggregates: ["count"],
groupHeaderColumnTemplate: "Count: #=count#", width: 300
},
{ field: "UnitPrice", title: "Unit Price" },
{ field: "UnitsOnOrder", title: "Units On Order" },
{ field: "UnitsInStock", title: "Units In Stock", aggregates: ["min"],
//groupHeaderTemplate: "Min: #= min #", width: 500
}
]
});
</script>

---

了解最新Kendo UI最新資訊，請(qǐng)關(guān)注Telerik中文網(wǎng)！