Kendo UI for jQuery數(shù)據(jù)管理使用教程：搜索面板、分頁功能
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四個控件。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)記錄。
入門指南
要啟用該功能，請在工具欄配置中包含搜索選項。另外，可以自定義搜索輸入中輸入值時要搜索的字段。
$("#grid").kendoGrid({
toolbar: ["search"],
search: {
fields: ["ContactTitle"]
}
...
});
已知局限性
在過濾器文本框中啟用過濾后，所有Grid列的數(shù)據(jù)將使用在搜索文本框中輸入的值填充。
分頁
默認情況下，禁用網(wǎng)格中的分頁。
入門指南
要啟用網(wǎng)格的分頁功能，請將其pageable選項設(shè)置為true。
為了使分頁正常工作：
- 定義要在每個頁面上顯示的網(wǎng)格記錄數(shù)。
- 定義數(shù)據(jù)集中的記錄總數(shù)。
- 在數(shù)據(jù)源上指定pageSize，并在數(shù)據(jù)集中指定將包含記錄總數(shù)的字段。
$("#grid").kendoGrid({ pageable: true // Other configuration. });
在服務(wù)器上分頁
為了增強Grid的性能，通過將數(shù)據(jù)源的serverPaging選項設(shè)置為true，在服務(wù)器上應(yīng)用分頁操作。 啟用serverPaging時，數(shù)據(jù)源將以下默認參數(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ā)送和接收JSON有效負載的HTTP請求一起使用。 例如，要將窗口小部件綁定到特定數(shù)據(jù)子集的特定頁面，請指示dataSource使用serverPaging。 結(jié)果，它將直接使用接收到的數(shù)據(jù)。 相同的規(guī)則適用于過濾、分組、聚合和排序操作。
$(document).ready(function(){
$("#grid").kendoGrid({
groupable: true,
scrollable: true,
sortable: true,
pageable: true
});
});
配置Pager
默認情況下，即使網(wǎng)格的數(shù)據(jù)源項總數(shù)小于pageSize值，它也會顯示一個pager。
從Kendo UI 2017 R3版本開始，網(wǎng)格使您可以通過pageable.alwaysVisible配置屬性來切換pager的可見性，如果pageable.alwaysVisible值為false，則pager將獲得以下操作：
- 當最初在數(shù)據(jù)源中設(shè)置的項目總數(shù)小于pageSize值時，將隱藏該pager。
- 當數(shù)據(jù)源中最初設(shè)置的項目總數(shù)大于或等于pageSize值時，將顯示pager。
- 如果在pageSize中執(zhí)行刪除、篩選或更新操作后，數(shù)據(jù)源中的項目總數(shù)小于pageSize值，則將隱藏該pager。
- 如果在插入、篩選或pageSize更新后，數(shù)據(jù)源中的項目總數(shù)大于或等于pageSize值，則將顯示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微信公眾號，及時獲取最新動態(tài)及最新資訊
QQ交談
在線咨詢
渝公網(wǎng)安備
50010702500608號
客服熱線