Kendo UI for jQuery数据管理使用教程：多列标题/列菜单等-控件新闻-慧都网

Kendo UI for jQuery数据管理使用教程：多列标题/列菜单等

翻译|使用教程|编辑：龚雪|2020-04-10 09:22:44.387|阅读 465 次

概述：Kendo UI for jQuery是创建现代Web应用程序的最完整UI库，Grid的多列标题表示一种树状结构，用户可以通过一个公共标题将一个或多个列组合在一起。

多列标题

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: "//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: "//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>

扫描关注慧聚IT微信公众号，及时获取最新动态及最新资讯