Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四個控件。Kendo UI for jQuery是創(chuàng)建現(xiàn)代Web應(yīng)用程序的完整UI庫。

 

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

 

 

搜索面板

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

 

入門指南

要啟用該功能，請在工具欄配置中包含搜索選項(xiàng)。另外，可以自定義搜索輸入中輸入值時要搜索的字段。

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

 

已知局限性

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

 

分頁

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

 

入門指南

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

為了使分頁正常工作：

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

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

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

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

 

在服務(wù)器上分頁

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

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

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

 

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

Grid與發(fā)送和接收J(rèn)SON有效負(fù)載的HTTP請求一起使用。 例如，要將窗口小部件綁定到特定數(shù)據(jù)子集的特定頁面，請指示dataSource使用serverPaging。 結(jié)果，它將直接使用接收到的數(shù)據(jù)。相同的規(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值，它也會顯示一個pager。

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

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

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

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

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