异常教程

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 开发中，数据网格（Data Grid）是展示和操作表格数据的核心组件。jQuery EasyUI 的数据网格（DataGrid）因其简洁的 API 和丰富的功能，成为许多开发者的选择。然而，默认的排序功能可能无法满足复杂场景的需求，例如需要根据业务规则动态调整排序逻辑，或对非标准数据类型（如日期、金额）进行精准排序。本文将深入讲解如何通过自定义排序功能，让数据网格更贴合实际业务需求。

一、数据网格基础概念与默认排序机制

1.1 数据网格的核心功能

jQuery EasyUI 的数据网格（datagrid）是一个高度封装的表格组件，支持分页、筛选、排序、编辑等功能。其核心优势在于：

  • 直观的配置语法：通过简单的 JSON 配置即可定义列、数据源和行为。
  • 跨浏览器兼容性：支持主流浏览器的 CSS 和 JavaScript 优化。
  • 插件化扩展：可与 EasyUI 的其他组件（如分页条、对话框）无缝集成。

1.2 默认排序的实现原理

默认情况下，数据网格通过 sortName 和 sortOrder 参数控制排序：

  • sortName：指定排序的列名（需与数据源字段匹配）。
  • sortOrder：指定排序方向（asc 或 desc）。
    当用户点击列标题时，数据网格会自动触发服务器端的排序逻辑（若数据来自服务端），或对本地数据进行排序。

比喻：
默认排序就像 Excel 中的“升序/降序”按钮，用户通过点击列头快速调整数据顺序，但无法处理“自定义规则”的需求，例如按“中文姓名拼音首字母排序”或“按订单金额的绝对值排序”。

二、自定义排序的核心原理与实现步骤

2.1 自定义排序的触发机制

自定义排序需要覆盖 EasyUI 默认的排序逻辑。关键步骤如下：

  1. 禁用默认排序：通过 remoteSort: false 参数，阻止数据网格自动触发服务端排序。
  2. 手动绑定排序事件：使用 onSortColumn 回调函数，捕获用户点击列头的事件。
  3. 实现本地排序算法：通过 JavaScript 对数据源进行排序，并更新网格显示。

2.2 实现步骤详解

步骤 1：定义数据网格基础配置

<table id="employeeGrid"></table>

<script>
$(function() {
    $('#employeeGrid').datagrid({
        url: '/api/employees',  // 数据源地址
        columns: [[
            { field: 'id', title: 'ID', width: 80 },
            { field: 'name', title: '姓名', width: 150, sortable: true },
            { field: 'salary', title: '薪资（元）', width: 150, sortable: true },
            { field: 'hireDate', title: '入职日期', width: 150, sortable: true }
        ]],
        remoteSort: false,  // 关键参数：禁用默认远程排序
        onSortColumn: function(sort, order) {
            // 自定义排序逻辑将在此处实现
        }
    });
});
</script>

步骤 2：编写排序函数

通过 sort 和 order 参数获取排序条件，并对数据源进行排序：

// 假设数据已加载到 data 变量中
let data = [
    { id: 1, name: '张三', salary: 15000, hireDate: '2020-03-15' },
    { id: 2, name: '李四', salary: 18000, hireDate: '2019-09-20' },
    // ...其他数据
];

function customSort(sort, order) {
    // 根据 sort 字段选择排序规则
    let compareFunction;
    switch (sort) {
        case 'name':
            compareFunction = (a, b) => {
                return a.name.localeCompare(b.name);
            };
            break;
        case 'salary':
            compareFunction = (a, b) => {
                return a.salary - b.salary;
            };
            break;
        case 'hireDate':
            // 将日期字符串转换为 Date 对象进行比较
            const dateA = new Date(a.hireDate);
            const dateB = new Date(b.hireDate);
            return dateA - dateB;
            break;
        default:
            return;
    }

    // 根据 order 参数调整排序方向
    if (order === 'desc') {
        compareFunction = (a, b) => -compareFunction(a, b);
    }

    // 对数据进行排序并刷新网格
    data.sort(compareFunction);
    $('#employeeGrid').datagrid('loadData', { rows: data });
}

三、实战案例：按“薪资绝对值”排序

3.1 场景描述

假设需要根据“薪资的绝对值”进行排序，而非直接比较数值。例如：

  • 当薪资为负数（如欠薪）时，应按其绝对值参与排序。

3.2 实现代码

case 'salary':
    compareFunction = (a, b) => {
        const absA = Math.abs(a.salary);
        const absB = Math.abs(b.salary);
        return absA - absB;
    };
    break;

3.3 关键点解析

  • Math.abs() 的使用：确保所有数值以绝对值参与比较。
  • 排序方向控制：通过 order 参数动态调整升序/降序。

四、进阶技巧与常见问题

4.1 多列联合排序

若需支持多列排序（如先按部门排序，再按薪资排序），可通过 onSortColumn 累计排序条件：

let sortColumns = [];
$('#employeeGrid').datagrid({
    // 其他配置...
    onSortColumn: function(sort, order) {
        // 将新的排序条件加入数组
        sortColumns.push({ field: sort, order: order });
        // 触发排序函数
        customSort(sortColumns);
    }
});

4.2 服务端与客户端排序的平衡

  • 本地排序：适合数据量小（<1000条）的场景，响应速度快。
  • 服务端排序：适合大数据量，避免内存压力。可通过 sort 和 order 参数传递到后端处理。

4.3 常见问题及解决方案

问题描述解决方案
排序后图标未更新调用 refreshRow 或重新加载数据
日期格式无法正确排序将字符串转换为 Date 对象再比较
排序函数性能问题使用更高效的比较逻辑（如避免嵌套循环）

五、结论：让数据网格更智能

通过自定义排序功能，开发者可以突破 EasyUI 默认机制的限制，实现高度灵活的排序逻辑。无论是处理特殊数据类型、复合排序规则，还是优化性能，均可以通过本文的方法论逐步实现。建议读者结合实际业务场景，逐步完善排序策略，让数据网格真正成为提升用户体验的核心工具。

关键词布局回顾：

  • 在标题、前言、案例和代码示例中自然融入“jQuery EasyUI 数据网格 – 自定义排序”关键词，确保 SEO 效果。
  • 通过对比默认与自定义排序的差异，强化读者对核心概念的理解。

希望本文能帮助开发者在数据展示场景中，更高效地驾驭 EasyUI 的强大功能！

最新发布

查看更多文章