jQuery EasyUI使用教程：在數(shù)據(jù)網(wǎng)格中自定義排序

---

Kendo UI for jQuery——創(chuàng)建現(xiàn)代Web應用程序的最完整UI庫！查看詳情>>>

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

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

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

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);

正如您從這個代碼中看到，我們創(chuàng)建了一個自定義排序日期。日期格式為“DD / MM / YYYY”，可以輕松地按年月日排序。

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

購買最新正版授權！"咨詢在線客服"