内射口爆少妇麻豆,国产三级影院,国产成视频

Kendo UI for jQuery數(shù)據(jù)管理使用教程：搜索面板、分頁(yè)功能

翻譯|使用教程|編輯：龔雪|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)售中 >>

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ù)將使用在搜索文本框中輸入的值填充。

分頁(yè)

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

入門(mén)指南

要啟用網(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。

<!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: "&nbsp;", 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">&#8203;</label>').appendTo(container);
}
</script>
</div>

</body>
</html>

掃描關(guān)注慧聚IT微信公眾號(hào)，及時(shí)獲取最新動(dòng)態(tài)及最新資訊