Kendo UI for jQuery数据管理使用教程：连续滚动-控件新闻-慧都网

Kendo UI for jQuery数据管理使用教程：连续滚动

原创|使用教程|编辑：龚雪|2020-05-15 09:24:02.280|阅读 167 次

概述：Kendo UI for jQuery是创建现代Web应用程序的最完整UI库，虚拟滚动是分页的替代方法，本文将为大家介绍连续滚动。

相关链接：

Kendo UI for jQuery R1 2020 SP2试用版下载

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库。

当您显示大量项目并使用编辑、分组、过滤、排序或层次结构时，连续滚动非常适合。

网格连续滚动本地数据的演示：

<!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>
<script src="../content/shared/js/people.js"></script>
<div id="example">
<div id="grid"></div>

<script>
$(function () {
var count = 5000;

if (kendo.support.browser.msie) {
if (kendo.support.browser.version < 10) {
count = 1000;
} else {
count = 2000;
}
}

$("#message").text(kendo.format("Generating {0} items", count));

generatePeople(count, function (data) {
var initStart;
var renderStart;
var lastId;

$("#message").text("");

setTimeout(function () {
initStart = new Date();
lastId = data.length;
$("#grid").kendoGrid({
dataSource: {
data: data,
pageSize: 20,
schema: {
model: {
id: "Id",
fields: {
FirstName: { type: "string" },
LastName: { type: "string" },
City: { type: "string" },
Age: { type: "number" },
BirthDate: { editable: false },
Title: { type: "string" }
}
}
}
},
groupable: true,
sortable: true,
height: 550,
scrollable: {
endless: true
},
save: function (e) {
if (e.model.isNew()) {
lastId++;
e.model.set("Id", lastId);
}
},
pageable: {
numeric: false,
previousNext: false,
messages: {
display: "Showing {2} data items"
}
},
editable: {
mode: 'inline',
},
toolbar: ["create"],
columns: [
{ field: "FirstName", title: "First Name", width: "130px" },
{ field: "LastName", title: "Last Name", width: "130px" },
{ field: "City", title: "City", width: "130px" },
{ field: "Title", width: "130px" },
{ command: ["edit", "destroy"], title: "&nbsp;", width: "250px" }
]
});

initEnd = new Date();

$("#message").text(kendo.format("Kendo UI Grid bound to {0} items in {1} milliseconds", count, initEnd - initStart));
});
});
});
</script>

</div>

</body>
</html>

网格连续滚动远程数据的演示：

<!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>
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "//demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "//demos.telerik.com/kendo-ui/service/Northwind.svc/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) };
}
return kendo.data.transports["odata"].parameterMap(options, operation);
}
},
pageSize: 20,
type: "odata",
batch: true,
serverPaging: true,
serverSorting: true,
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 } }
}
},
data: function (response) {
return response.d ? response.d.results: response;
}
}
});

$("#grid").kendoGrid({
dataSource: dataSource,
height: 550,
sortable: true,
scrollable: {
endless: true
},
pageable: {
numeric: false,
previousNext: false
},
editable: "inline",
toolbar: ["create"],
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "120px" },
{ field: "UnitsInStock", title: "Units In Stock", width: "120px" },
{ field: "Discontinued", width: "120px" },
{ command: ["edit", "destroy"], title: "&nbsp;", width: "250px" }]
});
});
</script>
</div>

</body>
</html>

入门指南

要启用连续滚动，请将scrollable.endless属性设置为true。

注意：为了使功能正常工作，有两个要求：

需要一个垂直滚动条
网格的高度应恒定

当网格绑定到本地和远程数据时，它们都支持连续滚动：

当绑定到本地数据数组时，网格会将所有项目序列化到客户端，并且在用户滚动时，小部件将显示新项目。
当绑定到远程数据时，网格仅将一页的项目序列化。当用户滚动到列表的末尾时，网格将发送AJAX请求以获取下一页的项目。返回数据后，网格仅呈现新项目并将其追加到旧项目。

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

与编辑一起使用

与常规分页一样，连续滚动与编辑方式相似，但是当您与编辑一起使用连续滚动并打开一个项目进行编辑时，即使在请求新页面之后，该项目仍将保持打开状态。

与分组一起使用

开箱即用，连续滚动与分组一起工作，但是当两个功能一起使用时，网格将以以下特定方式运行：

如果将网格滚动到底部，它将请求的项目数将等于项目数和页面大小。
如果最后一组项目被折叠，则网格仍将请求该组中的项目。
如果一组项目跨越多个页面，则网格将发出多个请求。
当返回特定的项目子集时，这些项目将被渲染和隐藏，因为该组已折叠。网格将继续请求这些项目，直到到达新的组或直到不存在任何要请求的项目为止。
如果网格绑定到远程数据，请启用serverGrouping将分组应用于所有项目。

与层次结构一起使用

如果网格显示层次结构数据并且展开了某个项目，则在滚动这些项目并请求新页面时，该网格不会折叠。

注意：筛选、排序和分组操作将重置滚动位置。

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

标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@capbkgr.cn

文章转载自：慧都网

上一篇：Ribbon UI组件QtitanRibbon全新发布v5.3.1|附下载下一篇：通用CAD图纸处理软件ABviewer2020最新基础教程：为工程图添加注释及其他修改

彩票走势图

在线采购

中文文档库

试用/Demo下载

开发社群