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