Web UI开发神器—Kendo UI for jQuery数据管理之搜索/分页功能

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是创建现代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 = "https://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>

了解最新Kendo UI最新资讯，请关注Telerik中文网！

来源：oschina

链接：https://my.oschina.net/u/3992677/blog/3157585

标签

KendoUI

jquery