Kendo UI for jQuery数据管理使用教程：搜索面板、分页功能-控件新闻-慧都网

Kendo UI for jQuery数据管理使用教程：搜索面板、分页功能

翻译|使用教程|编辑：龚雪|2020-01-10 09:38:30.140|阅读 141 次

概述：Kendo UI for jQuery是创建现代Web应用程序的最完整UI库。Kendo UI for jQuery数据管理中，网格的搜索面板和分页功能。

搜索面板

网格小部件具有内置功能，使用户可以搜索数据。搜索面板在后台使用过滤功能来仅显示网格中的相关记录。

入门指南

要启用该功能，请在工具栏配置中包含搜索选项。另外，可以自定义搜索输入中输入值时要搜索的字段。

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

已知局限性

在过滤器文本框中启用过滤后，所有Grid列的数据将使用在搜索文本框中输入的值填充。

分页

默认情况下，禁用网格中的分页。

入门指南

要启用网格的分页功能，请将其pageable选项设置为true。

为了使分页正常工作：

定义要在每个页面上显示的网格记录数。
定义数据集中的记录总数。
在数据源上指定pageSize，并在数据集中指定将包含记录总数的字段。

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

在服务器上分页

为了增强Grid的性能，通过将数据源的serverPaging选项设置为true，在服务器上应用分页操作。启用serverPaging时，数据源将以下默认参数发送到服务器：

top参数定义在响应中发送回的记录数。
skip参数定义从数据集开始要跳过的记录数。

例如，要显示60条记录的数据集中的第3页（每页分为10条记录），网格将发送skip: 20, top: 10。

Grid与发送和接收JSON有效负载的HTTP请求一起使用。例如，要将窗口小部件绑定到特定数据子集的特定页面，请指示dataSource使用serverPaging。结果，它将直接使用接收到的数据。相同的规则适用于过滤、分组、聚合和排序操作。

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

配置Pager

默认情况下，即使网格的数据源项总数小于pageSize值，它也会显示一个pager。

从Kendo UI 2017 R3版本开始，网格使您可以通过pageable.alwaysVisible配置属性来切换pager的可见性，如果pageable.alwaysVisible值为false，则pager将获得以下操作：

当最初在数据源中设置的项目总数小于pageSize值时，将隐藏该pager。
当数据源中最初设置的项目总数大于或等于pageSize值时，将显示pager。
如果在pageSize中执行删除、筛选或更新操作后，数据源中的项目总数小于pageSize值，则将隐藏该pager。
如果在插入、筛选或pageSize更新后，数据源中的项目总数大于或等于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 = "//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>

扫描关注慧聚IT微信公众号，及时获取最新动态及最新资讯