论坛首页 Web前端技术论坛

ExtJS Grid 自定义排序规则

浏览 4390 次
精华帖 (0) :: 良好帖 (1) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2009-06-24   最后修改:2009-07-02

有一些需求 如:

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);
          }
        }
      });
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics