EasyUI datagrid 排序

sortName、sortOrder

通过在datagrid中添加sortName可以控制排序的列，sortOrder控制默认排序。多个排序列使用“，”隔开即可

$("xx").datagrid({
sortName:'name1,name2',
sortOrder:'asc,desc'
})

multiSort

multiSort在文档中使用描述为”定义是否允许多列排序“。但是使用中才发现，添加multiSort后会强调排序顺序

$("xx").datagrid({
sortName:'name1,name2',
sortOrder:'asc,desc',
multiSort:true
})

该排序会在name1排序的基础上对name2排序。如果不使用multiSort，那么name1，name2列的排序是互相独立的。

remoteSort

这里不得不提的一个属性还有remoteSort，文档描述为“定义从服务器对数据进行排序”。也就是说，如果定义了remoteSort：false，那么数据会在浏览器中对数据进行排序，并不会去服务器重新取排序好的数据。如果存在数据分页的情况，一定要设置remoteSort：true。除非把所有的数据都返回到了浏览器端，可以直接在浏览器端进行排序。

sortable、order

这两个属性为columns属性，sortable设置为true，标识该列支持排序，order为默认排序状态。如果只设置column排序属性不设置sortName、sortOrder，第一次刷新页面，默认是初始状态如图：

columns:[[    
    {field:'sort1',title:'全国排名',rowspan:2,width:80,sortable:true,order:'asc'},    
    {field:'sort1',title:'全省排名',rowspan:2,width:80,sortable:true,order:'desc'},    
    ]]

 

点击后进入sortOrder设置的状态。例如第一次点击全省排名列，会进入设置的desc状态。第二次点击后，会切换状态至asc。

 

同样第一次点击全国排名时，也会进入设置的asc状态，之后点击会不断的切换状态。

需要注意的是，如果只设置columns排序属性，多个排序列之间是独立的。

sorter

sorter也为columns属性，用于对返回至浏览器的数据，进行自定义排序。有兴趣可以自己尝试

onBeforeSortColumn、 onSortColumn

两个方法的区别在于，onSortColumn在用户排序一列时触发，而onBeforeSortColumn在排序列之前触发，返回false都可以取消排序。入参为sort、order。

需要注意的是：如果使用datagrid的sortName、sortOrder属性设置排序多个排序列，sort、order都会返回所有的列的当前排序状态。

总结

如果需要设置默认排序状态，可以使用datagrid的sortName、sortOrder属性设置默认，如果多个列之间有依赖顺序关系，可以开启multiSort，如果多个列之间没有关系，且独立，不想更改都判断多个属性的状态，建议使用columns属性的sortable、order。