Kendo UI for jQuery數據管理使用教程：組模板

---

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四個控件。Kendo UI for jQuery是創建現代Web應用程序的最完整UI庫。

組模板

應用分組時，Grid的分組行將數據行組織為樹形結構。

有關可運行的示例，請參閱：

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

• - 為整個組行渲染一個模板。 通常主要目的是顯示有關整個組的信息，默認情況下如果您未定義模板，那么將顯示字段名稱和當前組值。
• - 在與行本身對齊的組行中渲染模板。 通常它在當前組的上下文中顯示特定列的合計值，模板內容在視覺上顯示為與列本身對齊。
• - 在與該列對齊的組頁腳行中渲染模板，與組頁腳行的groupHeaderColumnTemplate相似。

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

圖1：沒有組模板的網格

使用GroupHeaderTemplate的唯一區別是模板內容是編譯和顯示的，而不是字段和當前組的值。 GroupHeaderColumnTemplate和GroupFooterTemplate的工作方式相似。

GroupHeaderColumnTemplate將內容顯示為與組行中的列對齊。 GroupFooterTemplate將內容顯示為與組頁腳行中的列對齊。 它們的內容顯示為與列對齊，如下所示。

圖2：具有定義的組頭和組腳模板的網格

因為GroupHeaderTemplate顯示在組行的擴展圖標旁邊，所以它優先于第一個可見列的GroupHeaderColumnTemplate。 若要顯示Grid第一列的GroupHeaderColumnTemplate內容，請不要為group列設置GroupHeaderTemplate。 下面的網格配置演示了對Units In Stock列的GroupHeaderTemplate進行注釋，會顯示Product Name列的GroupHeaderColumnTemplate。

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://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>

---