Easyuidatagrid自定义排序

合集下载
  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

Easyuidatagrid⾃定义排序
做项⽬遇到个关于排序问题,想着在前端排序,正好Easyui有这个功能,所以就拿来⽤了⼀下,因为跟官⽹的Demo不太⼀样,所以总结⼀下;
⾸先这⼀列是要排序的列(当然,在⽣产环境,这⼀列是隐藏的,在开发阶段,我没有隐藏⽽已),不⽤多说可定是CEO排在最上
⾯,Leader排在中间,Employee排后⾯,默认的顺序是这样的;
然后我在该列加⼀个配置
就是 sortable:true 的配置,这个配置告诉datagrid表⽰这类是可以排序的,同时在这列的表头多了⼀个排序按钮,就像这样
当出现这个箭头的时候;你可以点击⼀下,然后就可以排序了,但这并不是最终的⽬的,我们的⽬地是⼀开始就要排序好,⽽不是⼿动再去点点;
于是在datafrid中配置
onSortColumn⽅法;该⽅法,就是排序的⽅法
onSortColumn: function (sort, order) {
alert("sort:"+sort+",order:"+order+"");
}
,当你添加过该⽅法后,你再去点击,那个排序按钮,就会出现
第⼀个值是排序的字段,第⼆个值是排序的顺序倒叙,或者降序;
有了这个之后,在datafrid中配置
sortName:'position',
sortOrder:'desc',
sortName就是你要排序的字段名;
sortOrder就是排序的数序;
好的,上⾯的都配置好了之后就要开始写⾃定义排序函数了,如下
{
title: '员⼯编号',
field: 'id',
align: "center",
width: '14%'
},{
title:'是否是领导',
field:'position',
// hidden:true,
align: "center",
width: '10%',
sortable:true,
sorter:function (a,b) {
return (a.length<b.length?1:-1);
}
请注意sorter⽅法,这个⽅法有两个参数,接下来就对这个参数就⾏判断吧,我这⾥使⽤长度来判断的,短的排在上⾯,你们可以根据⾃⼰实际需求进⾏排序,再次刷新页⾯,直接就是排序好的表格了
最后,需要做的就是将这⼀列隐藏就好了(当然根据个⼈需要!)
重点要说⼀下的就是,建议⾸先写sorter⽅法,这⾥定义了你排序的条件,有了这个条件之后,再去定义排序的规则(正/逆),就可以了!。

相关文档
最新文档