Kendo UI/Telerik全栈开发组件推荐,轻松构建交互式现代UI应用
当前位置: 首页 > 使用教程

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

发布时间:2020-01-19

Kendo UI for jQuery R3 2019 SP1试用版下载

Kendo UI目前最新提供Kendo UI for jQueryKendo UI for AngularKendo UI Support for ReactKendo 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参数,该参数包含将应用数据集排序列的字段名称。

如图:启用了排序功能的网格

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

网格支持以下排序模式:

单列排序

默认情况下,当sortable设置为true时,网格将应用单列排序。 您还可以通过将可编辑的mode选项设置为single来配置单列排序模式。

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

多列排序

要启用多列排序,请将模式选项可编辑设置为多个。

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


了解最新Kendo UI最新资讯,请关注Telerik中文网!

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

慧聚IT微信公众号
在线
客服
在线
QQ
电话
咨询
400-700-1020
返回
顶部