• <menu id="w2i4a"></menu>
  •
    logo Kendo UI使用教程-2019
    文檔首頁>>Kendo UI使用教程-2019>>Kendo UI for jQuery數(shù)據(jù)管理使用教程：網(wǎng)格排序

    Kendo UI for jQuery數(shù)據(jù)管理使用教程：網(wǎng)格排序

    Kendo UI for jQuery R3 2019 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庫。

    本文主要介紹如何使用Kendo UI for jQuery數(shù)據(jù)管理中的網(wǎng)格排序功能，默認(rèn)情況下，禁用網(wǎng)格排序。 

    <!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>
<script src="../content/shared/js/orders.js"></script>

<div id="example">

<div class="demo-section k-content wide">
<h4>Grid with single column sorting enabled</h4>
<div id="singleSort"></div>
</div>

<div class="demo-section k-content wide">
<h4>Grid with multiple column sorting enabled</h4>
<div id="multipleSort"></div>
</div>

<script>
$(document).ready(function () {
$("#singleSort").kendoGrid({
dataSource: {
data: orders,
pageSize: 6
},
sortable: {
mode: "single",
allowUnsort: false
},
pageable: {
buttonCount: 5
},
scrollable: false,
columns: [
{
field: "ShipCountry",
title: "Ship Country",
sortable: {
initialDirection: "desc" 
},
width: 300
},
{
field: "Freight",
width: 300
},
{
field: "OrderDate",
title: "Order Date",
format: "{0:dd/MM/yyyy}"
}
]
});

$("#multipleSort").kendoGrid({
dataSource: {
data: orders,
pageSize: 6
},
sortable: {
mode: "multiple",
allowUnsort: true,
showIndexes: true
},
pageable: {
buttonCount: 5
},
scrollable: false,
columns: [
{
field: "ShipCountry",
title: "Ship Country",
width: 300
},
{
field: "Freight",
width: 300
},
{
field: "OrderDate",
title: "Order Date",
format: "{0:d}"
}
]
});
});
</script>
<style>
.demo-section h3 {
margin: 5px 0 15px 0;
}
</style>
</div>

</body>
</html>

    入門指南

    要啟用Grid的排序功能，請將sortable選項(xiàng)設(shè)置為true。 結(jié)果，將應(yīng)用默認(rèn)的單列排序功能。

    為了增強(qiáng)Grid的性能，通過將數(shù)據(jù)源的serverSorting選項(xiàng)設(shè)置為true，在服務(wù)器上應(yīng)用排序操作。 啟用服務(wù)器排序后，您將收到默認(rèn)的orderBy參數(shù)，該參數(shù)包含將應(yīng)用數(shù)據(jù)集排序列的字段名稱。

    如圖：啟用了排序功能的網(wǎng)格

    Kendo UI for jQuery數(shù)據(jù)管理使用教程：網(wǎng)格排序
    排序方式

    網(wǎng)格支持以下排序模式：

    單列排序

    默認(rèn)情況下，當(dāng)sortable設(shè)置為true時，網(wǎng)格將應(yīng)用單列排序。 您還可以通過將可編輯的mode選項(xiàng)設(shè)置為single來配置單列排序模式。 

    $("#grid").kendoGrid({
sortable: true
// Other configuration.
});

    多列排序

    要啟用多列排序，請將模式選項(xiàng)可編輯設(shè)置為多個。 

    $("#grid").kendoGrid({
sortable: {
mode: "multiple"
},
// Other configuration.
});

    了解最新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); })();