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: " ", 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: " ", width: "250px" }]});});</script></div></body></html>
入门指南
要启用连续滚动，请将scrollable.endless属性设置为true。
注意：为了使功能正常工作，有两个要求：
- 需要一个垂直滚动条
- 格的高度应恒定
当 格绑定到本地和远程数据时，它们都支持连续滚动：
- 当绑定到本地数据数组时， 格会将所有项目序列化到客户端，并且在用户滚动时，小部件将显示新项目。
- 当绑定到远程数据时， 格仅将一页的项目序列化。 当用户滚动到列表的末尾时， 格将发送AJAX请求以获取下一页的项目。 返回数据后， 格仅呈现新项目并将其追加到旧项目。
$("#grid").kendoGrid({scrollable: {endless: true},// Other configuration.});
与分组一起使用
开箱即用，连续滚动与分组一起工作，但是当两个功能一起使用时， 格将以以下特定方式运行：
- 如果将 格滚动到底部，它将请求的项目数将等于项目数和页面大小。
- 如果最后一组项目被折叠，则 格仍将请求该组中的项目。
- 如果一组项目跨越多个页面，则 格将发出多个请求。
- 当返回特定的项目子集时，这些项目将被渲染和隐藏，因为该组已折叠。 格将继续请求这些项目，直到到达新的组或直到不存在任何要请求的项目为止。
- 如果 格绑定到远程数据，请启用serverGrouping将分组应用于所有项目。
与层次结构一起使用
如果 格显示层次结构数据并且展开了某个项目，则在滚动这些项目并请求新页面时，该 格不会折叠。
注意：筛选、排序和分组操作将重置滚动位置。
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！