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ù)。

 

Kendo UI for jQuery數(shù)據(jù)管理中，網(wǎng)格的搜索面板和分頁(yè)功能。

 

 

搜索面板

網(wǎng)格小部件具有內(nèi)置功能，使用戶可以搜索數(shù)據(jù)。搜索面板在后臺(tái)使用過(guò)濾功能來(lái)僅顯示網(wǎng)格中的相關(guān)記錄。

 

入門指南

要啟用該功能，請(qǐng)?jiān)诠ぞ邫谂渲弥邪阉鬟x項(xiàng)。另外，可以自定義搜索輸入中輸入值時(shí)要搜索的字段。

$(“#grid”).kendoGrid({
toolbar: [“search”],
search: {
fields: [“ContactTitle”]
}
…
});

 

已知局限性

在過(guò)濾器文本框中啟用過(guò)濾后，所有Grid列的數(shù)據(jù)將使用在搜索文本框中輸入的值填充。

 

分頁(yè)

默認(rèn)情況下，禁用網(wǎng)格中的分頁(yè)。

 

入門指南

要啟用網(wǎng)格的分頁(yè)功能，請(qǐng)將其pageable選項(xiàng)設(shè)置為true。

為了使分頁(yè)正常工作：

• 定義要在每個(gè)頁(yè)面上顯示的網(wǎng)格記錄數(shù)。

• 定義數(shù)據(jù)集中的記錄總數(shù)。

• 在數(shù)據(jù)源上指定pageSize，并在數(shù)據(jù)集中指定將包含記錄總數(shù)的字段。

• $(“#grid”).kendoGrid({ pageable: true // Other configuration. });

 

在服務(wù)器上分頁(yè)

為了增強(qiáng)Grid的性能，通過(guò)將數(shù)據(jù)源的serverPaging選項(xiàng)設(shè)置為true，在服務(wù)器上應(yīng)用分頁(yè)操作。啟用serverPaging時(shí)，數(shù)據(jù)源將以下默認(rèn)參數(shù)發(fā)送到服務(wù)器：

• top參數(shù)定義在響應(yīng)中發(fā)送回的記錄數(shù)。

• skip參數(shù)定義從數(shù)據(jù)集開(kāi)始要跳過(guò)的記錄數(shù)。

 

例如，要顯示60條記錄的數(shù)據(jù)集中的第3頁(yè)（每頁(yè)分為10條記錄），網(wǎng)格將發(fā)送skip: 20, top: 10。

Grid與發(fā)送和接收J(rèn)SON有效負(fù)載的HTTP請(qǐng)求一起使用。 例如，要將窗口小部件綁定到特定數(shù)據(jù)子集的特定頁(yè)面，請(qǐng)指示dataSource使用serverPaging。 結(jié)果，它將直接使用接收到的數(shù)據(jù)。相同的規(guī)則適用于過(guò)濾、分組、聚合和排序操作。

$(document).ready(function(){
$(“#grid”).kendoGrid({
groupable: true,
scrollable: true,
sortable: true,
pageable: true
});
});

 

配置Pager

默認(rèn)情況下，即使網(wǎng)格的數(shù)據(jù)源項(xiàng)總數(shù)小于pageSize值，它也會(huì)顯示一個(gè)pager。

從Kendo UI 2017 R3版本開(kāi)始，網(wǎng)格使您可以通過(guò)pageable.alwaysVisible配置屬性來(lái)切換pager的可見(jiàn)性，如果pageable.alwaysVisible值為false，則pager將獲得以下操作：

• 當(dāng)最初在數(shù)據(jù)源中設(shè)置的項(xiàng)目總數(shù)小于pageSize值時(shí)，將隱藏該pager。

• 當(dāng)數(shù)據(jù)源中最初設(shè)置的項(xiàng)目總數(shù)大于或等于pageSize值時(shí)，將顯示pager。

• 如果在pageSize中執(zhí)行刪除、篩選或更新操作后，數(shù)據(jù)源中的項(xiàng)目總數(shù)小于pageSize值，則將隱藏該pager。

• 如果在插入、篩選或pageSize更新后，數(shù)據(jù)源中的項(xiàng)目總數(shù)大于或等于pageSize值，則將顯示pager。