EasyUI 数据网格 - 设置排序并自定义排序

数据网格（DataGrid）的所有列可以通过点击列表头来排序。您可以定义哪列可以排序。默认的，列是不能排序的，除非您设置 sortable 属性为 true。

当排序时，数据网格（DataGrid）将发送两个参数到远程服务器：

• sort：排序列字段名。
• order：排序方式，可以是 'asc' 或者 'desc'，默认值是 'asc'。

EasyUI Datagrid 前端排序默认采用字符串排序(String类型)。有时候，我们为了让Datagrid里显示的数字精确到一定位数，会将数据转换为字符串传到前台。

而EasyUI 提供的 sortable: 'true' 方法只是对字符串进行了排序 ，结果如图所示：

 

本人实际项目中需求是将后台传过来的数据保留三位有效数字且对列数据进行排序操作：

{
field: 'Attained', title: '偏离度（%）', width: 80, align: 'center', sortable: 'true',

//格式化数据保留三位有效数字
formatter: function (value,row,index) {
if(row != null)
return (parseFloat(value).toFixed(3) + '').replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,');
//数据排序
}, sorter: function (a, b) {
if (parseFloat(a))
a = parseFloat(a);
if (parseFloat(b))
b = parseFloat(b);
return (a > b ? 1 : -1);
}
},

 

自定义排序，这样后台传来的数据依然保持精确位数，依然为字符串，而在前台我们将其转为浮点数，通过自定义排序方法按照浮点数真实大小排序。

 

项目实际效果图 如下所示: