翻譯|使用教程|編輯:龔雪|2020-01-10 09:38:30.140|閱讀 192 次
概述:Kendo UI for jQuery是創(chuàng)建現(xiàn)代Web應(yīng)用程序的最完整UI庫(kù)。Kendo UI for jQuery數(shù)據(jù)管理中,網(wǎng)格的搜索面板和分頁(yè)功能。
# 界面/圖表報(bào)表/文檔/IDE等千款熱門(mén)軟控件火熱銷(xiāo)售中 >>
相關(guān)鏈接:
Kendo UI for jQuery R3 2019 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ù)。
Kendo UI for jQuery數(shù)據(jù)管理中,網(wǎng)格的搜索面板和分頁(yè)功能。
網(wǎng)格小部件具有內(nèi)置功能,使用戶可以搜索數(shù)據(jù)。 搜索面板在后臺(tái)使用過(guò)濾功能來(lái)僅顯示網(wǎng)格中的相關(guān)記錄。
入門(mén)指南
要啟用該功能,請(qǐng)?jiān)诠ぞ邫谂渲弥邪阉鬟x項(xiàng)。另外,可以自定義搜索輸入中輸入值時(shí)要搜索的字段。
$("#grid").kendoGrid({ toolbar: ["search"], search: { fields: ["ContactTitle"] } ... });
已知局限性
在過(guò)濾器文本框中啟用過(guò)濾后,所有Grid列的數(shù)據(jù)將使用在搜索文本框中輸入的值填充。
默認(rèn)情況下,禁用網(wǎng)格中的分頁(yè)。
入門(mén)指南
要啟用網(wǎng)格的分頁(yè)功能,請(qǐng)將其pageable選項(xiàng)設(shè)置為true。
為了使分頁(yè)正常工作:
$("#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ù)器:
例如,要顯示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將獲得以下操作:
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="styles/kendo.common.min.css" /> <link rel="stylesheet" href="styles/kendo.default.min.css" /> <link rel="stylesheet" href="styles/kendo.default.mobile.min.css" /> <script src="js/jquery.min.js"></script> <script src="js/kendo.all.min.js"></script> </head> <body> <div id="example"> <div id="grid"></div> <div class="box wide"> <h4>Configure</h4> <label for="btnPagerVisibility">alwaysVisible:</label> <input type="checkbox" id="btnPagerVisibility" /> </div> <script> $(document).ready(function () { var crudServiceBaseUrl = "http://demos.telerik.com/kendo-ui/service", dataSource = new kendo.data.DataSource({ transport: { read: { url: crudServiceBaseUrl + "/Products", dataType: "jsonp" }, update: { url: crudServiceBaseUrl + "/Products/Update", dataType: "jsonp" }, destroy: { url: crudServiceBaseUrl + "/Products/Destroy", dataType: "jsonp" }, create: { url: crudServiceBaseUrl + "/Products/Create", dataType: "jsonp" }, parameterMap: function(options, operation) { if (operation !== "read" && options.models) { return {models: kendo.stringify(options.models)}; } } }, batch: true, pageSize: 10, schema: { model: { id: "ProductID", fields: { ProductID: { editable: false, nullable: true }, ProductName: { validation: { required: true } }, UnitPrice: { type: "number", validation: { required: true, min: 1} }, Discontinued: { type: "boolean" }, UnitsInStock: { type: "number", validation: { min: 0, required: true } } } } } }); $("#grid").kendoGrid({ dataSource: dataSource, navigatable: true, height: 400, filterable: true, pageable: { alwaysVisible: false, pageSizes: [5, 10, 20, 100] }, toolbar: ["create", "save", "cancel"], columns: [ "ProductName", { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 120 }, { field: "UnitsInStock", title: "Units In Stock", width: 120 }, { field: "Discontinued", width: 120, editor: customBoolEditor }, { command: "destroy", title: " ", width: 150 }], editable: true }); var grid = $("#grid").data("kendoGrid"); $("#btnPagerVisibility").change(function() { grid.setOptions({ pageable: { alwaysVisible: this.checked } }); }); }); function customBoolEditor(container, options) { $('<input class="k-checkbox" type="checkbox" name="Discontinued" data-type="boolean" data-bind="checked:Discontinued">').appendTo(container); $('<label class="k-checkbox-label">​</label>').appendTo(container); } </script> </div> </body> </html>
掃描關(guān)注慧聚IT微信公眾號(hào),及時(shí)獲取最新動(dòng)態(tài)及最新資訊
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@ke049m.cn
文章轉(zhuǎn)載自:慧都網(wǎng)