jQuery EasyUI 数据网格 - 自定义排序

数据网格是 Web 应用程序中经常使用的交互式控件之一。当我们需要大量数据展示时，往往需要对其进行排序。jQuery EasyUI 数据网格提供了内置的排序功能，但是当我们需要根据特定规则进行排序时，就需要自定义排序方式。

实现自定义排序

通过 jQuery EasyUI 数据网格，我们可以对列进行排序，可以使用默认的排序方式（升序或降序），也可以实现自定义的排序方式。

自定义排序需要实现一个函数，以应用于需要排序的列。该函数的输入参数为两个记录（row1 和 row2），输出参数为一个比较结果值（1、-1 或 0），分别表示 row1 大于、小于或等于 row2。

以下是一个自定义排序的示例代码：

function mySorter(row1, row2) {
    if (row1.someCondition === true && row2.someCondition === false) {
        return 1;
    } else if (row1.someCondition === false && row2.someCondition === true) {
        return -1;
    } else {
        if (row1.value > row2.value) {
            return 1;
        } else if (row1.value < row2.value) {
            return -1;
        } else {
            return 0;
        }
    }
}

以上代码中，mySorter 是我们自定义的排序函数。它首先判断 row1 和 row2 是否满足某个条件，如果满足，则 row1 大于 row2；如果不满足，则进入后面的比较逻辑。在比较逻辑中，如果 row1 的值大于 row2 的值，则 row1 大于 row2；如果 row1 的值小于 row2 的值，则 row1 小于 row2；否则，row1 等于 row2。

调用自定义排序

对于数据网格中需要使用自定义排序的列，需要在 columns 属性中增加 sorter 属性，值为排序函数名。例如：

$('#dg').datagrid({
    url: 'get_data.php',
    columns: [[
        { field:'name', title:'Name', width:50, sorter: 'mySorter' },
        { field:'age', title:'Age', width:50 }
    ]]
}); 

以上代码中，name 列使用了自定义排序，该列的 sorter 属性为 mySorter，表示使用我们之前定义的自定义排序函数。

总结

通过自定义排序函数，我们可以针对特定的规则对数据网格中的列进行排序。实现自定义排序需要先定义一个函数，函数的输入参数为两个记录，输出结果为比较值。然后，在数据网格中指定需要使用自定义排序的列，将该列的 sorter 属性设置为自定义排序函数名即可。