Web界面开发工具!Kendo UI for jQuery数据管理:多列标题/列菜单
Kendo UI for jQuery R1 2020 SP1试用版下载
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的多列标题表示一种树状结构,用户可以通过一个公共标题将一个或多个列组合在一起。
网格提供了一个内置选项,可通过菜单触发列操作。
<!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 () { $("#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, resizable: true, reorderable: true, pageable: true, columnMenu: true, columns: [{ field: "CompanyName", title: "Company Name", width: 420 }, { title: "Contact Info", columns: [{ field: "ContactTitle", title: "Contact Title", width: 200 },{ field: "ContactName", title: "Contact Name", width: 200 },{ title: "Location", columns: [ { field: "Country", width: 200 },{ field: "City", width: 200 }] },{ field: "Phone", title: "Phone" }] }] }); }); </script> </div> </body> </html>
该公共标头又可以是另一个上级MultiColumn标头的子级,它也可以同时覆盖列和其他标头。
columns: [ { title: "Personal Info", columns: [ { field: "name" }, { field: "birthdate" } ] }, { title: "Location", columns: [ { field: "city" }, { field: "country" } ] }, { field: "phone" }]
![DevExpress WPF使用技巧教程](https://image.evget.com/Content/images/202004/03/2d2db722ab6c264003dd116da5d176c4.png)
列菜单
Grid提供一个内置选项,可通过菜单触发列操作。
要启用列菜单实现,请设置columnMenu = true。 结果,Grid的列标题呈现一个菜单列,该菜单使用户可以对列进行排序、过滤或更改其可见性。列菜单还会检测何时通过列定义禁用特定的列操作,并从其呈现中排除了相应的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> <div id="example"> <div id="grid"></div> <script> $(document).ready(function() { $("#grid").kendoGrid({ dataSource: { type: "odata", transport: { read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders" }, schema: { model: { fields: { OrderID: { type: "number" }, ShipCountry: { type: "string" }, ShipName: { type: "string" }, ShipAddress: { type: "string" } } } }, pageSize: 30, serverPaging: true, serverFiltering: true, serverSorting: true }, height: 550, sortable: true, filterable: true, columnMenu: true, pageable: true, columns: [ { field: "OrderID", title: "Order ID", width: 120 }, { field: "ShipCountry", title: "Ship Country" }, { field: "ShipName", title: "Ship Name" }, { field: "ShipAddress", filterable: false } ] }); }); </script> </div> </body> </html>