EasyUI Datagrid 前端按数字排序（自定义排序）

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

例如我们规定价格都精确到两位小数，那么22就转换为字符串“22.00”传到前台，这样虽然保证了精确位数的一致性，但是如果直接利用Datagrid默认的排序功能对这列字符串排序会出现一定问题：



这样，解决方法有两种，一种是将后台传到前台数据不转换，使用整型或者浮点型数据，例如22传到前台显示为22，而22.50传到前台会被显示为22.5，利用这样的数据排序是正确的，但是精确位数发生了变化，这是我们所不希望的。

另一种方法是利用Datagrid的自定义排序sorter进行排序。将字符串先转为浮点数，然后就可以通过自定义函数来实现按照数据大小排序。

sorter

function

T自定义字段排序函数，有2个参数： a：该列的第一个值。 b：该列的第二个值。 示例: $('#dg').datagrid({ remoteSort: false, columns: [[ {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); } } } ]] });

1. 我们在需要排序的列，加入sorter="numberSort"（注：remoteSort=“false”是必须的）

<th field="PRICE" width="120" sortable="true" align="right" halign="center" sorter="numberSort">批发价</th><th
field="RTL_PRICE" width="120" sortable="true" align="right" halign="center" sorter="numberSort">零售价</th>

2.再具体实现numberSort函数，就可以按照数字来排序了

[javascript] view
plaincopy

function numberSort(a,b){

var number1 = parseFloat(a);

var number2 = parseFloat(b);

return (number1 > number2 ? 1 : -1);

}

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




原地址:/article/9709832.html