Kendo UI for jQuery R2 2020试用版下载
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", "130px" },
{ field: "LastName", title: "Last Name", "130px" },
{ field: "City", title: "City", "130px" },
{ field: "Title", "130px" },
{ command: ["edit", "destroy"], title: " ", "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}", "120px" },
{ field: "UnitsInStock", title: "Units In Stock", "120px" },
{ field: "Discontinued", "120px" },
{ command: ["edit", "destroy"], title: " ", "250px" }]
});
});
</script>
</div>
</body>
</html>
入门指南
要启用连续滚动，请将scrollable.endless属性设置为true。
注意：为了使功能正常工作，有两个要求：
- 需要一个垂直滚动条
- 网格的高度应恒定
当网格绑定到本地和远程数据时，它们都支持连续滚动：
- 当绑定到本地数据数组时，网格会将所有项目序列化到客户端，并且在用户滚动时，小部件将显示新项目。
- 当绑定到远程数据时，网格仅将一页的项目序列化。 当用户滚动到列表的末尾时，网格将发送AJAX请求以获取下一页的项目。 返回数据后，网格仅呈现新项目并将其追加到旧项目。
$("#grid").kendoGrid({
scrollable: {
endless: true
},
// Other configuration.
});
与编辑一起使用
与常规分页一样，连续滚动与编辑方式相似，但是当您与编辑一起使用连续滚动并打开一个项目进行编辑时，即使在请求新页面之后，该项目仍将保持打开状态。
与分组一起使用
开箱即用，连续滚动与分组一起工作，但是当两个功能一起使用时，网格将以以下特定方式运行：
- 如果将网格滚动到底部，它将请求的项目数将等于项目数和页面大小。
- 如果最后一组项目被折叠，则网格仍将请求该组中的项目。
- 如果一组项目跨越多个页面，则网格将发出多个请求。
- 当返回特定的项目子集时，这些项目将被渲染和隐藏，因为该组已折叠。 网格将继续请求这些项目，直到到达新的组或直到不存在任何要请求的项目为止。
- 如果网格绑定到远程数据，请启用serverGrouping将分组应用于所有项目。
与层次结构一起使用
如果网格显示层次结构数据并且展开了某个项目，则在滚动这些项目并请求新页面时，该网格不会折叠。
注意：筛选、排序和分组操作将重置滚动位置。
了解最新Kendo UI最新资讯，请关注Telerik中文网！
扫描关注慧聚IT微信公众号，及时获取最新动态及最新资讯
