Kendo UI for jQuery数据管理使用教程：网格排序-控件新闻-慧都网

Kendo UI for jQuery数据管理使用教程：网格排序

原创|行业资讯|编辑：龚雪|2020-01-19 10:21:21.770|阅读 173 次

概述：本文主要介绍如何使用Kendo UI for jQuery数据管理中的网格排序功能，默认情况下，禁用网格排序。

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微信公众号，及时获取最新动态及最新资讯

标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@ke049m.cn

文章转载自：慧都网

上一篇：Visual Studio控件集ComponentOne新版本亮点三：Blazor UI控件及 Web端更新下一篇：C和C ++的静态分析工具PC-lint Plus v1.3更新内容：新功能（下）

半岛外围网上直营

在线采购

中文文档库

试用/Demo下载

开发社群