以下是以资深软件开发工程师的视角，对“jQuery EasyUI 数据网格 – 设置排序（Sorting）”的专业回答。我将详细讲解如何在 jQuery EasyUI 的数据网格（DataGrid）中设置排序功能，包括基础用法、高级配置和动态应用，包含目录、小标题、代码示例和内部链接，确保内容清晰、技术准确且易于理解。回答基于截至 2025 年 3 月 16 日的最新信息，使用 jQuery EasyUI 的最新稳定版（1.10.x）为参考。

jQuery EasyUI 数据网格 – 设置排序（Sorting）

目录

  1. 引言
  2. 排序概述
  1. 实现基础排序
  1. 高级排序配置
  1. 最佳实践与注意事项
  1. 结论

1. 引言

jQuery EasyUI 的数据网格（DataGrid）内置了强大的排序功能，允许用户通过点击列标题对数据进行升序或降序排列。本教程将从基础到高级，带你掌握如何在 DataGrid 中设置排序，包括客户端排序和服务器端排序，并提供实用示例。

2. 排序概述

2.1 什么是排序？

  • 定义：排序是 DataGrid 的一种交互特性，通过点击列标题对数据按指定字段进行升序（ASC）或降序（DESC）排列。
  • 实现方式：通过设置列的 sortable: true 属性启用，默认支持客户端排序，可通过 remoteSort 配置服务器端排序。

2.2 排序的应用场景

  • 数据分析：按数值（如价格、ID）或文本（如名称）排序。
  • 用户体验：快速定位特定数据，提升表格可操作性。
  • 参考：jQuery EasyUI 官方文档 DataGrid Sorting 部分（jeasyui.com）。

3. 实现基础排序

3.1 准备工作

  • 引入依赖：需要 jQuery、EasyUI 的核心文件和主题文件。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/icon.css">

3.2 创建基础排序

  • 方法：在列定义中添加 sortable: true，点击列标题即可触发排序。
  • 示例：
$('#dg').datagrid({
  columns: [[
    { field: 'id', title: 'ID', width: 100, sortable: true },
    { field: 'name', title: '名称', width: 100, sortable: true }
  ]]
});

3.3 实例：基础排序

以下是一个基础排序的完整示例：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery EasyUI 基础排序</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
  <link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
  <link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/icon.css">
  <style>
    body { padding: 20px; }
  </style>
</head>
<body>
  <div class="container">
    <h2>基础排序</h2>
    <table id="dg" class="easyui-datagrid" style="width: 500px; height: 250px;"></table>
  </div>
  <script>
    $('#dg').datagrid({
      data: [
        { id: 3, name: '项目 C' },
        { id: 1, name: '项目 A' },
        { id: 2, name: '项目 B' }
      ],
      columns: [[
        { field: 'id', title: 'ID', width: 100, sortable: true },
        { field: 'name', title: '名称', width: 200, sortable: true }
      ]]
    });
  </script>
</body>
</html>
  • 运行方法：保存为 HTML 文件，在浏览器中打开。
  • 效果：显示一个表格，包含 ID 和名称两列，点击列标题可按升序或降序排序数据（客户端排序）。

4. 高级排序配置

4.1 多列排序和自定义排序

  • 多列排序：设置 multiSort: true，允许同时按多列排序（需按住 Ctrl 点击）。
  • 自定义排序：通过 sorter 函数定义排序逻辑。
  • 示例：
$('#dg').datagrid({
  multiSort: true,
  columns: [[
    { field: 'id', title: 'ID', width: 100, sortable: true },
    { field: 'name', title: '名称', width: 100, sortable: true, sorter: function(a, b) {
      return a.localeCompare(b, 'zh'); // 中文排序
    }}
  ]]
});

4.2 动态排序和服务器端排序

  • 动态排序：通过 sortName 和 sortOrder 设置初始排序。
  • 服务器端排序：设置 remoteSort: true，通过 onSortColumn 发送请求到后端。
  • 示例：
$('#dg').datagrid({
  url: 'data.json',
  remoteSort: true,
  sortName: 'id',
  sortOrder: 'desc',
  onSortColumn: function(sort, order) {
    $(this).datagrid('reload', { sort: sort, order: order });
  }
});

4.3 实例：带交互的动态排序

以下是一个带交互和服务器端模拟的动态排序示例：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery EasyUI 带交互的动态排序</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
  <link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
  <link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/icon.css">
  <style>
    body { padding: 20px; }
    .btn { margin: 5px; }
  </style>
</head>
<body>
  <div class="container">
    <h2>带交互的动态排序</h2>
    <button class="btn easyui-linkbutton" onclick="sortBy('id', 'asc')">按 ID 升序</button>
    <button class="btn easyui-linkbutton" onclick="sortBy('name', 'desc')">按名称降序</button>
    <table id="dg" class="easyui-datagrid" style="width: 600px; height: 300px;"></table>
  </div>
  <script>
    // 模拟服务器数据
    var data = {
      total: 5,
      rows: [
        { id: 3, name: '项目 C', price: 300 },
        { id: 1, name: '项目 A', price: 100 },
        { id: 5, name: '项目 E', price: 500 },
        { id: 2, name: '项目 B', price: 200 },
        { id: 4, name: '项目 D', price: 400 }
      ]
    };

    $('#dg').datagrid({
      data: data,
      multiSort: true,
      sortName: 'id',
      sortOrder: 'asc',
      columns: [[
        { field: 'id', title: 'ID', width: 100, sortable: true },
        { field: 'name', title: '名称', width: 200, sortable: true, sorter: function(a, b) {
          return a.localeCompare(b, 'zh'); // 支持中文排序
        }},
        { field: 'price', title: '价格', width: 150, sortable: true }
      ]],
      onSortColumn: function(sort, order) {
        $.messager.show({
          title: '排序',
          msg: `按 ${sort} ${order} 排序`,
          timeout: 2000,
          showType: 'slide'
        });
      }
    });

    function sortBy(field, order) {
      $('#dg').datagrid('sort', {
        sortName: field,
        sortOrder: order
      });
      // 模拟服务器端排序
      var rows = data.rows.slice().sort(function(a, b) {
        var valA = a[field], valB = b[field];
        if (field === 'name') return order === 'asc' ? valA.localeCompare(valB, 'zh') : valB.localeCompare(valA, 'zh');
        return order === 'asc' ? valA - valB : valB - valA;
      });
      $('#dg').datagrid('loadData', { total: rows.length, rows: rows });
    }
  </script>
</body>
</html>
  • 运行方法：保存为 HTML 文件，在浏览器中打开。
  • 效果：
  • 初始按 ID 升序显示表格（ID: 1-5）。
  • 点击“按 ID 升序”或“按名称降序”按钮动态排序，弹出排序提示。
  • 点击列标题支持多列排序（Ctrl + 点击），中文名称按拼音排序。

5. 最佳实践与注意事项

5.1 设计与实现建议

  • 默认排序：设置 sortName 和 sortOrder 提供初始顺序。
  • 用户反馈：通过 onSortColumn 提示当前排序状态。
  • 本地化：对中文排序使用 localeCompare 确保准确性。

5.2 性能优化与调试

  • 性能：大数据量时启用 remoteSort，将排序逻辑交给服务器。
  • 调试：检查 sortName 和 sortOrder 是否正确传递，确认数据刷新无误。

6. 结论

jQuery EasyUI 的 DataGrid 通过 sortable 属性和相关配置，提供了灵活的排序功能，支持客户端和服务器端实现。本文通过基础和高级示例展示了其用法，帮助你快速上手。如果需要自定义视图，可参考 jQuery EasyUI 自定义视图 或访问官方文档（jeasyui.com）。

回答特点

  • 结构：包含目录、带锚点的小标题和代码示例，逻辑清晰。
  • 实用性：从基础排序到动态交互，覆盖实际需求。
  • 内部链接：通过 <a href="#ID"> 跳转，如 实现基础排序。
  • 出站链接：嵌入正文，指向官方文档。

如何运行

  • 直接保存为 HTML 文件，在浏览器中打开即可（需联网加载 CDN 资源）。