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

jQuery EasyUI 数据网格 – 自定义排序（Custom Sorting）

目录

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

1. 引言

jQuery EasyUI 的数据网格（DataGrid）内置了排序功能，但通过自定义排序，你可以定义特定的排序规则（如大小写不敏感、复杂字段排序）或与服务器端交互。本教程将从基础到高级，带你掌握如何在 DataGrid 中实现自定义排序，并提供实用示例。

2. 自定义排序概述

2.1 什么是自定义排序？

  • 定义：自定义排序是指在 DataGrid 中通过 sorter 函数或服务器端逻辑，替代默认的升序/降序规则，实现特定字段的排序方式。
  • 实现方式：客户端使用 sorter 函数，服务器端通过 sort 和 order 参数处理。

2.2 自定义排序的应用场景

  • 特殊规则：如按字符串长度排序或忽略大小写。
  • 大数据排序：将排序逻辑交给服务器处理。
  • 参考：jQuery EasyUI 官方文档 DataGrid 排序部分（jeasyui.com/documentation）。

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 使用 sorter 函数

  • 方法：在列定义中设置 sortable: true 和 sorter 函数，接收两个参数（a 和 b）并返回比较结果。
  • 示例：按字符串长度排序：
{
  field: 'name',
  title: '名称',
  sortable: true,
  sorter: function(a, b) {
    return a.length - b.length; // 按长度升序
  }
}

3.3 实例：基础自定义排序

以下是一个按字符串长度排序的基础示例：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <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>
    .container { max-width: 600px; margin: 20px auto; }
  </style>
</head>
<body>
  <div class="container">
    <h1>基础自定义排序</h1>
    <table id="dg" class="easyui-datagrid" style="width:100%;height:250px"
           data-options="
             rownumbers: true,
             singleSelect: true">
      <thead>
        <tr>
          <th data-options="field:'id',width:100">ID</th>
          <th data-options="
            field:'name',
            width:200,
            sortable:true,
            sorter:function(a, b) {
              return a.length - b.length; // 按名称长度排序
            }">名称</th>
          <th data-options="field:'price',width:100,align:'right',sortable:true">价格</th>
        </tr>
      </thead>
    </table>
  </div>
  <script>
    // 示例数据
    var data = {
      rows: [
        { id: 1, name: '苹果', price: 10.5 },
        { id: 2, name: '香蕉', price: 20.75 },
        { id: 3, name: '西瓜', price: 15.0 },
        { id: 4, name: '草莓果', price: 25.0 }
      ]
    };
    $('#dg').datagrid('loadData', data);
  </script>
</body>
</html>
  • 运行方法：保存为 HTML 文件，在浏览器中打开。
  • 效果：显示 4 行数据，点击“名称”列标题按名称长度排序（苹果→西瓜→香蕉→草莓果），再次点击反向排序。

4. 高级自定义排序配置

4.1 多列自定义排序

  • 方法：设置 multiSort: true 允许多列排序，并为每列定义 sorter。
  • 示例：按名称长度和价格排序：
multiSort: true,
columns: [[
  { field: 'name', title: '名称', sortable: true, sorter: function(a, b) { return a.length - b.length; } },
  { field: 'price', title: '价格', sortable: true, sorter: function(a, b) { return a - b; } }
]]

4.2 服务器端排序

  • 方法：通过 remoteSort: true 和 sortName、sortOrder 参数，将排序逻辑交给服务器处理。
  • 示例：
$('#dg').datagrid({
  url: 'get_data.php',
  remoteSort: true,
  sortName: 'price', // 默认排序字段
  sortOrder: 'asc'   // 默认排序顺序
});

4.3 实例：动态服务器端排序

以下是一个结合服务器端排序和多列排序的高级示例：

前端代码

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <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>
    .container { max-width: 600px; margin: 20px auto; }
  </style>
</head>
<body>
  <div class="container">
    <h1>动态服务器端排序</h1>
    <table id="dg" class="easyui-datagrid" style="width:100%;height:300px"
           data-options="
             url: 'get_data.php',
             remoteSort: true,
             multiSort: true,
             sortName: 'price',
             sortOrder: 'asc',
             pagination: {
               pageSize: 5,
               pageList: [5, 10, 20]
             },
             rownumbers: true,
             singleSelect: true,
             onSortColumn: function(sort, order) {
               console.log('排序字段:', sort, '顺序:', order);
             }">
      <thead>
        <tr>
          <th data-options="field:'id',width:100">ID</th>
          <th data-options="
            field:'name',
            width:200,
            sortable:true,
            sorter:function(a, b) {
              return a.localeCompare(b, 'zh'); // 按中文排序
            }">名称</th>
          <th data-options="field:'price',width:100,align:'right',sortable:true">价格</th>
        </tr>
      </thead>
    </table>
  </div>
</body>
</html>

后端代码（get_data.php）

<?php
header('Content-Type: application/json');

// 获取分页和排序参数
$page = isset($_GET['page']) ? intval($_GET['page']) : 1;
$rows = isset($_GET['rows']) ? intval($_GET['rows']) : 5;
$sort = isset($_GET['sort']) ? $_GET['sort'] : 'price';
$order = isset($_GET['order']) ? $_GET['order'] : 'asc';
$offset = ($page - 1) * $rows;

// 模拟数据
$total = 15;
$data = [
  ['id' => 1, 'name' => '苹果', 'price' => 10.5],
  ['id' => 2, 'name' => '香蕉', 'price' => 20.75],
  ['id' => 3, 'name' => '西瓜', 'price' => 15.0],
  ['id' => 4, 'name' => '草莓', 'price' => 25.0],
  ['id' => 5, 'name' => '橙子', 'price' => 12.0],
  ['id' => 6, 'name' => '葡萄', 'price' => 30.0],
  ['id' => 7, 'name' => '芒果', 'price' => 22.5],
  ['id' => 8, 'name' => '菠萝', 'price' => 18.0],
  ['id' => 9, 'name' => '梨子', 'price' => 14.0],
  ['id' => 10, 'name' => '桃子', 'price' => 28.0],
  ['id' => 11, 'name' => '樱桃', 'price' => 35.0],
  ['id' => 12, 'name' => '荔枝', 'price' => 40.0],
  ['id' => 13, 'name' => '龙眼', 'price' => 16.5],
  ['id' => 14, 'name' => '榴莲', 'price' => 50.0],
  ['id' => 15, 'name' => '火龙果', 'price' => 13.5]
];

// 排序
usort($data, function($a, $b) use ($sort, $order) {
  if ($sort === 'name') {
    $cmp = strcmp($a[$sort], $b[$sort]);
  } else {
    $cmp = $a[$sort] - $b[$sort];
  }
  return $order === 'asc' ? $cmp : -$cmp;
});

// 分页
$paginatedData = array_slice($data, $offset, $rows);

// 返回数据
echo json_encode([
  'total' => $total,
  'rows' => $paginatedData
]);
?>
  • 运行方法：
  1. 将 HTML 保存为 index.html，PHP 保存为 get_data.php。
  2. 使用本地服务器（如 XAMPP）运行，确保 PHP 环境可用。
  • 效果：
  • 显示 15 条数据的分页视图，每页 5 条，默认按价格升序排序。
  • 点击“名称”按中文排序，点击“价格”按数值排序，支持多列排序（Ctrl+点击）。
  • 控制台记录排序字段和顺序。

5. 最佳实践与注意事项

5.1 设计与实现建议

  • 排序规则：为复杂字段（如中文或混合数据）定义清晰的 sorter 函数。
  • 用户提示：通过列头箭头或事件反馈排序状态。

5.2 性能优化与调试

  • 性能：大数据量时优先使用服务器端排序，避免客户端负担。
  • 调试：检查 onSortColumn 中的参数，确保服务器接收正确排序请求。

6. 结论

jQuery EasyUI 的数据网格通过 sorter 函数和服务器端支持提供了灵活的自定义排序功能，适用于特殊规则和大数量场景。本文通过基础和高级示例展示了实现过程，帮助你快速上手。如果需要列分组，可参考 创建列组合 或访问 jQuery EasyUI 官方文档（jeasyui.com）。

回答特点

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

如何运行

  • 基础示例直接保存为 HTML 文件打开即可；高级示例需配置本地服务器运行 PHP 文件。