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>
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！