• <menu id="w2i4a"></menu>
  •
    logo Kendo UI使用教程-2019
    文檔首頁>>Kendo UI使用教程-2019>>Kendo UI for jQuery數(shù)據(jù)管理使用教程：多列標(biāo)題/列菜單等

    Kendo UI for jQuery數(shù)據(jù)管理使用教程：多列標(biāo)題/列菜單等

    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是創(chuàng)建現(xiàn)代Web應(yīng)用程序的最完整UI庫。

    多列標(biāo)題

    Grid的多列標(biāo)題表示一種樹狀結(jié)構(gòu)，用戶可以通過一個公共標(biāo)題將一個或多個列組合在一起。

    網(wǎng)格提供了一個內(nèi)置選項，可通過菜單觸發(fā)列操作。 

    <!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>

    該公共標(biāo)頭又可以是另一個上級MultiColumn標(biāo)頭的子級，它也可以同時覆蓋列和其他標(biāo)頭。 


    columns: [
{
title: "Personal Info",
columns: [
{ field: "name" },
{ field: "birthdate" }
]
},
{
title: "Location",
columns: [
{ field: "city" },
{ field: "country" }
]
},
{
field: "phone"
}]


    DevExpress WPF使用技巧教程

    列菜單

    Grid提供一個內(nèi)置選項，可通過菜單觸發(fā)列操作。

    要啟用列菜單實現(xiàn)，請設(shè)置columnMenu = true。 結(jié)果，Grid的列標(biāo)題呈現(xiàn)一個菜單列，該菜單使用戶可以對列進(jìn)行排序、過濾或更改其可見性。列菜單還會檢測何時通過列定義禁用特定的列操作，并從其呈現(xiàn)中排除了相應(yīng)的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最新資訊，請關(guān)注Telerik中文網(wǎng)！

    掃描關(guān)注慧聚IT微信公眾號，及時獲取最新動態(tài)及最新資訊

    慧聚IT微信公眾號
    掃碼咨詢


    添加微信 立即咨詢

    電話咨詢

    客服熱線
    023-68661681

    TOP
    三级成人熟女影院,欧美午夜成人精品视频,亚洲国产成人乱色在线观看,色中色成人论坛 (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })();