Kendo UI for jQuery是创建现代Web应用程序的最完整UI库，Grid的多列标题表示一种树状结构，用户可以通过一个公共标题将一个或多个列组合在一起。
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"}]
列菜单
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>
了解最新Kendo UI最新资讯，请关注Telerik中文网！
扫描关注慧聚IT微信公众号，及时获取最新动态及最新资讯
标签：
来源：慧都
声明：本站部分文章及图片转载于互联网，内容版权归原作者所有，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！