彩票走势图

logo Kendo UI使用教程-2019
文档彩票走势图>>Kendo UI使用教程-2019>>Kendo UI for jQuery数据管理使用教程：连续滚动

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

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微信公众号，及时获取最新动态及最新资讯

慧聚IT微信公众号
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP