ExtJS Grid 自定义排序规则

最新推荐文章于 2019-09-26 17:37:05 发布

最新推荐文章于 2019-09-26 17:37:05 发布 · 791 阅读

文章标签：

#EXT #F#

ExtJS 专栏收录该内容

40 篇文章

订阅专栏

本文介绍如何在ExtJS中实现自定义排序规则，包括特定字段的排序、中文排序及特殊场景下的排序处理，例如文件夹始终置顶或特定条件下的排序排除。

有一些需求 如:

1.某个字段的内容的可选值是: 男,女,不男不女,雌雄同体, 要求排序的顺序是男>女>不男不女>雌雄同体

2.中文排序

只需要对相应的record的field设置里面添加sortType ,

代码如下:

// current sort     after sort we want
// +-+------+          +-+------+
// |1|First |          |1|First |
// |2|Last  |          |3|Second|
// |3|Second|          |2|Last  |
// +-+------+          +-+------+

{name:'xxx',dataIndex:'xxxxxx',

sortType: function(value) {
   switch (value.toLowerCase()) // native toLowerCase():
   {
      case 'first': return 1;
      case 'second': return 2;
      default: return 3;
   }
}

}

也可以把它加入到Ext.data.SortTypes ,然后record里面直接指定sortType:'defiendFnName'

还有一些需求 如:

1.一个文件管理的Grid,要求排序的时候,文件夹永远在顶部

2.一个显示成功率的Grid,要求成功数+失败数=0的数据,不参与排序,永远在底部

ExtJs本身并没有暴露这个接口,所以我们只能自己重写,如下代码

var store = new Ext.data.JsonStore({
        root:'data',
        fields:[
          'name',
          {name:'sucCount',type:'int'},
          {name:'failCount',type:'int'},
          {name:'sucRate',type:'float'},
          {name:'isValidateTest',type:'boolean'},
          {name:'statType',type:'int'},
          'testLogIds','bsc','msc','sgsn'
        ],
        sortInfo:{field: 'sucRate', direction: 'ASC'},
        //排序规则
        sortData:function(f, direction){
          direction = direction || 'ASC';
          var dir = direction == 'ASC' ? 1 : -1;
          var st = this.fields.get(f).sortType;
          //关键地方,重写排序排序规则
          var fn = function(r1, r2){
            if(!r1.get('isValidateTest')||!r2.get('isValidateTest')){
              //无效数据永远在下面
              return !r1.get('isValidateTest') ? dir : -dir;
            }else{
              var v1 = st(r1.data[f]), v2 = st(r2.data[f]);
              return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
            }
          };
          this.data.sort(direction, fn);
          if(this.snapshot && this.snapshot != this.data){
            this.snapshot.sort(direction, fn);
          }
        }
      });