文檔半島外圍網上直營>>Kendo UI使用教程-2019>>Kendo UI for jQuery數據管理使用教程：網格排序
Kendo UI for jQuery數據管理使用教程：網格排序
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是創建現代Web應用程序的最完整UI庫。
本文主要介紹如何使用Kendo UI for jQuery數據管理中的網格排序功能，默認情況下，禁用網格排序。
<!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選項設置為true。 結果，將應用默認的單列排序功能。
為了增強Grid的性能，通過將數據源的serverSorting選項設置為true，在服務器上應用排序操作。 啟用服務器排序后，您將收到默認的orderBy參數，該參數包含將應用數據集排序列的字段名稱。
如圖：啟用了排序功能的網格
排序方式
網格支持以下排序模式：
單列排序
默認情況下，當sortable設置為true時，網格將應用單列排序。 您還可以通過將可編輯的mode選項設置為single來配置單列排序模式。
$("#grid").kendoGrid({
sortable: true
// Other configuration.
});
多列排序
要啟用多列排序，請將模式選項可編輯設置為多個。
$("#grid").kendoGrid({
sortable: {
mode: "multiple"
},
// Other configuration.
});
掃描關注慧聚IT微信公眾號，及時獲取最新動態及最新資訊
QQ交談
在線咨詢
渝公網安備
50010702500608號
客服熱線