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的文章！