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ù)行組織為樹(shù)形結(jié)構(gòu)。

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

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

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

如果未定義模板，則以以下方式顯示字段名稱(chēng)和當(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è)可見(jiàn)列的GroupHeaderColumnTemplate。 若要顯示Grid第一列的GroupHeaderColumnTemplate內(nèi)容，請(qǐng)不要為group列設(shè)置GroupHeaderTemplate。 下面的網(wǎng)格配置演示了對(duì)Units In Stock列的GroupHeaderTemplate進(jìn)行注釋?zhuān)瑫?huì)顯示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>