当 jQuery EasyUI 数据网格的默认排序无法满足特定数据格式需求时,可通过自定义 sorter 函数实现灵活排序。本文将解析 sorter 函数的参数规则与返回值逻辑,并提供日期格式排序的完整实现示例,帮助开发者快速掌握自定义排序的配置方法。
sorter 函数参数与返回值规则
在 jQuery EasyUI 数据网格中,若默认排序行为无法满足需求,可通过在列配置中定义 sorter 函数实现自定义排序逻辑。该函数接收两个参数 valueA 和 valueB,分别代表需要比较的两个单元格值。函数需返回以下三种结果之一:
- 当 valueA > valueB 时,返回 1
- 当 valueA < valueB 时,返回 -1
- 当 valueA == valueB 时,返回 0
通过自定义比较逻辑,开发者可处理字符串、日期、复合字段等非标准数据类型的排序需求。
日期格式自定义排序实现
以下示例展示如何为 dd/mm/yyyy 格式的日期列实现自定义排序。代码通过 split('/') 方法将日期字符串拆分为数组,依次比较年、月、日字段:
$('#tt').datagrid({
title:'Custom Sort',
iconCls:'icon-ok',
width:520,
height:250,
singleSelect:true,
remoteSort:false,
columns:[[
{field:'itemid',title:'Item ID',width:60,sortable:true},
{field:'listprice',title:'List Price',width:70,align:'right',sortable:true},
{field:'unitcost',title:'Unit Cost',width:70,align:'right',sortable:true},
{field:'attr1',title:'Attribute',width:120,sortable:true},
{field:'date',title:'Date',width:80,sortable:true,align:'center',
sorter:function(a,b){
a = a.split('/');
b = b.split('/');
if (a[2] == b[2]){
if (a[0] == b[0]){
return (a[1]>b[1]?1:-1);
} else {
return (a[0]>b[0]?1:-1);
}
} else {
return (a[2]>b[2]?1:-1);
}
}
},
{field:'status',title:'Status',width:40,align:'center'}
]]
}).datagrid('loadData', data);示例中 date 列的 sorter 函数首先比较年份(数组索引 2),若年份相同则比较月份(索引 0),最后比较日期(索引 1)。该逻辑确保 dd/mm/yyyy 格式数据能按正确的时间顺序排列。

关键配置项说明
实现自定义排序需注意以下配置项:
- sortable: true:启用列的排序功能,未设置此属性的列无法触发排序
- remoteSort: false:关闭远程排序,确保排序逻辑在客户端执行而非依赖服务器返回
- sorter 函数位置:必须定义在对应列的配置对象内,与 field 和 title 同级
正确配置这些参数后,数据网格即可按照自定义逻辑处理排序请求。开发者可根据实际数据格式调整比较逻辑,例如处理带货币符号的数值或自定义状态码排序。

