Kendo UI for jQuery是创建现代Web应用程序的最完整UI库， 本文主要介绍如何使用Kendo UI for jQuery数据管理中的状态持久性、层次结构等。
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库。
状态持久性
Grid使您可以保存用户的自定义设置，并在用户将来再次登录后将其还原。
要保留以前应用于其结构的设置，请使用Grid的getOptions和setOptions方法。 这些方法允许您在需要时序列化Grid的当前状态，并在以后恢复该状态。
<!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 class="box wide"><a href="#" class="k-button" id="save">Save State</a><a href="#" class="k-button" id="load">Load State</a></div><div id="grid"></div><script>$(document).ready(function () {$("#grid").kendoGrid({dataSource: {type: "odata",transport: {read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"},pageSize: 20},height: 550,groupable: true,sortable: true,reorderable: true,resizable: true,columnMenu: true,filterable: {mode: "row"},pageable: {refresh: true,pageSizes: true,buttonCount: 5},columns: [{field: "ContactName",title: "Contact Name",width: 250,locked: true}, {field: "ContactTitle",title: "Contact Title",width: 350}, {field: "CompanyName",title: "Company Name",width: 350}, {field: "Country",width: 450}]});var grid = $("#grid").data("kendoGrid");$("#save").click(function (e) {e.preventDefault();localStorage["kendo-grid-options"] = kendo.stringify(grid.getOptions());});$("#load").click(function (e) {e.preventDefault();var options = localStorage["kendo-grid-options"];if (options) {grid.setOptions(JSON.parse(options));}});});</script></div></body></html>
层次结构
Grid通过以分层方式显示其表数据，提供用于可视化父记录和子记录之间关系的选项。
要在Grid中实现层次结构，请连接其detailInit事件并根据父键字段值过滤子表中的记录。
<!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 element = $("#grid").kendoGrid({dataSource: {type: "odata",transport: {read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"},pageSize: 6,serverPaging: true,serverSorting: true},height: 600,sortable: true,pageable: true,detailInit: detailInit,dataBound: function() {this.expandRow(this.tbody.find("tr.k-master-row").first());},columns: [{field: "FirstName",title: "First Name",width: "110px"},{field: "LastName",title: "Last Name",width: "110px"},{field: "Country",width: "110px"},{field: "City",width: "110px"},{field: "Title"}]});});function detailInit(e) {$("<div/>").appendTo(e.detailCell).kendoGrid({dataSource: {type: "odata",transport: {read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"},serverPaging: true,serverSorting: true,serverFiltering: true,pageSize: 10,filter: { field: "EmployeeID", operator: "eq", value: e.data.EmployeeID }},scrollable: false,sortable: true,pageable: true,columns: [{ field: "OrderID", width: "110px" },{ field: "ShipCountry", title:"Ship Country", width: "110px" },{ field: "ShipAddress", title:"Ship Address" },{ field: "ShipName", title: "Ship Name", width: "300px" }]});}</script></div></body></html>
了解最新Kendo UI最新资讯，请关注Telerik中文网！
扫描关注慧聚IT微信公众号，及时获取最新动态及最新资讯
标签：
来源：慧都
声明：本站部分文章及图片转载于互联网，内容版权归原作者所有，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！