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

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

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

# 正版采购狂欢节,企业采购正当时 # # 31款JAVA开发必备控件和工具 #

相关链接:

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

Kendo UI目前最新提供Kendo UI for jQueryKendo UI for AngularKendo UI Support for ReactKendo 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 = "https://demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "https://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将分组应用于所有项目。
与层次结构一起使用

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

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


了解最新Kendo UI最新资讯,请关注Telerik中文网!

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

慧聚IT微信公众号


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,尊重他人劳动成果

文章转载自:慧都网

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
title
相关厂商
相关产品
Kendo UI

全新升级的Kendo UI,是创建数据丰富的Web应用程序的最完整UI库。

Kendo UI for jQuery

完整的jQuery UI组件库,可快速构建出色的高性能响应式Web应用程序。

在线
客服
咨询
电话
400-700-1020
在线
QQ
购物车 反馈 返回
顶部
在线客服系统
live chat