jQuery EasyUI使用教程之在數據網格中自定義排序

<jQuery EasyUI最新試用版免費下載>

若是默認排序行爲不能知足您的需求，您能夠自定義數據網格的排序行爲。

基本上用戶能夠在列上定義一個函數名爲sorter的排序函數。這個函數將要接受兩個值，返回值將以下：

valueA > valueB => return 1
valueA < valueB => return -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);

正如您從這個代碼中看到，咱們建立了一個自定義排序日期。日期格式爲「DD / MM / YYYY」，能夠輕鬆地按年月日排序。

下載該EasyUI示例：easyui-datagrid-demo.zip


有興趣的朋友能夠點擊查看更多有關jQuery EasyUI的文章！