jEasyUI 自定義排序

如果默認(rèn)的排序行為不滿足您的需求，您可以自定義數(shù)據(jù)網(wǎng)格（datagrid）的排序行為。

最基礎(chǔ)的，用戶可以在列上定義一個排序函數(shù)，函數(shù)名是 sorter。這個函數(shù)將接受兩個值，返回值將如下：

valueA > valueB => 返回 1

valueA < valueB => 返回 -1

自定義排序代碼

????<table id="tt"></table>

????$('#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);

您可以從這段代碼中看到，我們?yōu)?date 列創(chuàng)建了自定義的 sorter。日期的格式是 'dd/mm/yyyy'，可以輕松的按年月日排序。

上一篇：jEasyUI 設(shè)置排序下一篇：jEasyUI 創(chuàng)建列組合