自定义排序


如果默认的排序行为不满足您的需求,您可以自定义数据网格(datagrid)的排序行为。

最基础的,用户可以在列上定义一个排序函数,函数名是 sorter。这个函数将接受两个值,返回值将如下:

valueA > valueB => 返回 1

valueA 返回 -1

自定义排序代码

  1. <table id="tt"></table>
  1. $('#tt').datagrid({
  2. title:'Custom Sort',
  3. iconCls:'icon-ok',
  4. width:520,
  5. height:250,
  6. singleSelect:true,
  7. remoteSort:false,
  8. columns:[[
  9. {field:'itemid',title:'Item ID',width:60,sortable:true},
  10. {field:'listprice',title:'List Price',width:70,align:'right',sortable:true},
  11. {field:'unitcost',title:'Unit Cost',width:70,align:'right',sortable:true},
  12. {field:'attr1',title:'Attribute',width:120,sortable:true},
  13. {field:'date',title:'Date',width:80,sortable:true,align:'center',
  14. sorter:function(a,b){
  15. a = a.split('/');
  16. b = b.split('/');
  17. if (a[2] == b[2]){
  18. if (a[0] == b[0]){
  19. return (a[1]>b[1]?1:-1);
  20. } else {
  21. return (a[0]>b[0]?1:-1);
  22. }
  23. } else {
  24. return (a[2]>b[2]?1:-1);
  25. }
  26. }
  27. },
  28. {field:'status',title:'Status',width:40,align:'center'}
  29. ]]
  30. }).datagrid('loadData', data);

您可以从这段代码中看到,我们为 date 列创建了自定义的 sorter。日期的格式是 'dd/mm/yyyy',可以轻松的按年月日排序。

下载 jQuery EasyUI 实例

下载地址