jQuery EasyUI 数据网格 – 设置排序（一文讲透）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在现代 Web 开发中，数据展示与交互是核心需求之一。jQuery EasyUI 数据网格作为一款功能强大的开源组件，凭借其直观的界面和丰富的功能，成为快速构建数据表格的首选工具。然而，对于刚接触这一框架的开发者而言，如何实现数据网格的排序功能，尤其是动态排序和自定义逻辑，常常是一道需要突破的门槛。本文将从基础到进阶，系统讲解如何在 EasyUI 数据网格中设置排序功能，并通过实际案例帮助读者掌握关键技巧。

一、理解数据网格与排序的基本逻辑

1.1 数据网格的核心作用

数据网格（DataGrid）类似于 Excel 表格，能够将复杂的数据以结构化的方式展示给用户。其核心功能包括分页、筛选、排序和操作按钮等。而设置排序是提升用户体验的关键步骤：它允许用户通过点击列头快速调整数据的排列顺序，例如按销售额降序排列或按时间升序排列。

1.2 排序功能的实现原理

EasyUI 数据网格的排序功能主要通过以下两种方式实现：

1. 客户端排序：在浏览器端直接对数据进行排序，适用于数据量较小的场景；
2. 服务端排序：通过向后端发送排序参数，由服务端处理并返回排序后的数据，适合大数据量或需要复杂计算的场景。

1.3 基础配置：开启排序功能

要启用排序，首先需要在列（columns）定义中为需要排序的列设置 sortable: true 属性。例如：

$('#dataGrid').datagrid({  
    url: '/api/data',  
    columns: [[  
        { field: 'id', title: 'ID', width: 100, sortable: true },  
        { field: 'name', title: '姓名', width: 150, sortable: true },  
        { field: 'score', title: '分数', width: 100, sortable: true }  
    ]]  
});

比喻：这就像在Excel中勾选“排序”选项，告诉表格“这一列可以被用户拖拽排序”。

二、动态排序：响应用户的实时操作

2.1 通过参数控制排序方向

EasyUI 提供了 sortName 和 sortOrder 参数，允许开发者在初始化或动态修改时指定默认排序的列和方向：

$('#dataGrid').datagrid({  
    sortName: 'score',  // 默认按分数列排序  
    sortOrder: 'desc'   // 默认降序排列  
});  

注意：若未设置 sortName，点击列头时将按用户选择的列排序；若未设置 sortOrder，默认方向为升序（asc）。

2.2 通过事件监听实现动态交互

当用户点击列头时，会触发 sort 事件。开发者可通过此事件捕获排序参数，并与后端通信：

$('#dataGrid').datagrid({  
    onSort: function(sort, order) {  
        // 将排序参数传递给后端  
        $.get('/api/data', { sort: sort, order: order }, function(data) {  
            $('#dataGrid').datagrid('loadData', data);  
        });  
    }  
});  

三、多列排序与自定义逻辑

3.1 启用多列排序功能

默认情况下，EasyUI 只支持单列排序。若需支持多列排序（例如先按部门排序，再按时间排序），需设置 multiSort: true：

$('#dataGrid').datagrid({  
    multiSort: true,  
    columns: [[  
        { field: 'department', title: '部门', sortable: true },  
        { field: 'date', title: '日期', sortable: true }  
    ]]  
});  

此时，用户可通过按住 Shift 或 Ctrl 键选择多列进行排序。

3.2 自定义排序规则

某些场景下，数据可能需要非默认的排序逻辑。例如，对日期字符串按时间戳排序，或对中文字符按拼音排序。此时可通过 sorter 函数实现：

{  
    field: 'date',  
    title: '日期',  
    sortable: true,  
    sorter: function(a, b) {  
        // 将日期字符串转换为时间戳进行比较  
        return Date.parse(a) - Date.parse(b);  
    }  
}  

四、实战案例：用户管理系统的排序功能

4.1 场景描述

假设我们正在开发一个用户管理系统，需要展示用户列表并支持以下功能：

• 按用户名（升序/降序）排序；
• 按注册时间（多列排序）；
• 与后端服务对接，实现服务端排序。

4.2 完整代码示例

// HTML 结构  
<table id="userGrid"></table>  

// JavaScript 配置  
$(function() {  
    $('#userGrid').datagrid({  
        url: '/api/users',  
        fitColumns: true,  
        pagination: true,  
        multiSort: true,  
        columns: [[  
            { field: 'id', title: 'ID', width: 80 },  
            {  
                field: 'username',  
                title: '用户名',  
                width: 150,  
                sortable: true  
            },  
            {  
                field: 'registerTime',  
                title: '注册时间',  
                width: 180,  
                sortable: true,  
                sorter: function(a, b) {  
                    return Date.parse(a) - Date.parse(b);  
                }  
            },  
            { field: 'status', title: '状态', width: 100 }  
        ]],  
        // 监听排序事件，触发服务端请求  
        onSort: function(sort, order) {  
            // 将多列排序参数转换为 URL 查询字符串  
            let params = {};  
            if (sort && order) {  
                params.sort = sort;  
                params.order = order;  
            }  
            // 重新加载数据  
            $('#userGrid').datagrid('reload', params);  
        }  
    });  
});  

关键点解析：

1. multiSort: true 允许用户通过多列排序；
2. sorter 函数确保日期字段按时间戳排序；
3. onSort 事件将排序参数传递给后端，并通过 reload 方法刷新表格。

五、进阶技巧与常见问题

5.1 优化服务端排序逻辑

当数据量较大时，服务端排序是更高效的选择。后端需接收 sort 和 order 参数，并按以下逻辑处理：

@app.route('/api/users')  
def get_users():  
    sort_field = request.args.get('sort', 'id')  
    sort_order = request.args.get('order', 'asc')  
    # 构建 SQL 查询  
    query = "SELECT * FROM users ORDER BY {} {}".format(  
        sort_field,  
        'DESC' if sort_order == 'desc' else 'ASC'  
    )  
    # 执行查询并返回结果  

5.2 解决排序图标不显示的问题

若列头的排序图标（如↑↓）未显示，可能需检查以下两点：

1. 确保 EasyUI 的主题 CSS 文件已正确引入；
2. 检查列定义中是否遗漏了 sortable: true。

5.3 性能优化建议

• 缓存排序结果：对静态数据（如字典表）可缓存排序后的结果；
• 分页结合排序：在服务端实现分页时，确保排序参数与分页参数（如 page 和 rows）一同传递。

六、结论

通过本文的讲解，读者应已掌握 jQuery EasyUI 数据网格 – 设置排序 的核心方法，包括基础配置、动态交互、多列排序和自定义逻辑。无论是新手还是中级开发者，都可以通过逐步实践案例，快速将理论转化为实际项目中的功能。

排序功能虽看似简单，但其灵活的应用场景和与后端的协作，能显著提升数据展示的效率和用户体验。未来，开发者还可探索 EasyUI 的其他高级功能，如数据过滤、单元格编辑和自定义渲染，进一步完善数据网格的交互体验。

提示：若需深入学习，可参考官方文档或尝试将本文案例扩展为包含搜索、导出功能的完整管理系统。