`
atian25
  • 浏览: 463101 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

ExtJS Grid 自定义排序规则

阅读更多

有一些需求 如:

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);
          }
        }
      });
分享到:
评论

相关推荐

    深入浅出ExtJS第2版

    深入浅出ExtJS第2版+源码..1 下载EXT发布包 1 1.2 如何查看EXT自带的API和示例 1 1.3 为什么有些示例必须放在服务器上 才能看到效果 2 1.4 Hello World 2 1.4.1 直接使用下载的发布包 2 1.4.2 在项目中使用EXT...

    精通JS脚本之ExtJS框架.part2.rar

    《精通JS脚本之ExtJS框架》由浅入深地讲解了ExtJS在Web开发中的相关技术。本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计...

    精通JS脚本之ExtJS框架.part1.rar

    《精通JS脚本之ExtJS框架》由浅入深地讲解了ExtJS在Web开发中的相关技术。本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计...

    Ext Js权威指南(.zip.001

    10.2.3 自定义单元格的显示格式 / 523 10.2.4 通过列对象定义单元格的显示格式 / 525 10.2.5 设置行的背景颜色 / 532 10.2.6 列标题的分组 / 533 10.2.7 使用锁定列 / 534 10.2.8 grid的配置项、属性、方法和...

    Ext 开发指南 学习资料

    4.7.4. 自定义验证规则 4.7.5. 算不上校验的NumberField 4.7.6. 使用后台返回的校验信息 4.8. 关于表单内部控件的布局问题 4.8.1. 什么都不做,默认的平铺布局 4.8.2. 分裂,分列 4.8.3. fieldset是个神奇的东西 ...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -在2009-03-03 v1.3.0曾经提到这个兼容问题,并有这样的规则,如果Asp.net的按钮AJAX提交,必须设置UseSubmitBehavior="false" --也就是说生成的input的type不能是"submit",而这个限制在有些情况下是不可原谅的...

    ExtAspNet_v2.3.2_dll

    ExtAspNet - ExtJS based ASP.NET Controls with Full AJAX Support ExtAspNet是一组专业的Asp.net控件库,拥有原生的AJAX支持和丰富的UI效果, 目标是创建没有ViewState,没有JavaScript,没有CSS,没有...

    FineUI(ASP.NET UI控件) v4.1.3.rar

    为Grid增加ShowPagingMessage,并更新示例:表格控件-&gt;分页与排序-&gt;数据库分页。 增加示例:导航控件-&gt;工具栏与菜单-&gt;内联菜单(HideOnClick)。 表格的PageIndex有效性检查,更新示例:表格控件-&gt;分页工具条-&gt;改变...

    EXT教程EXT用大量的实例演示Ext实例

    4.7.4. 自定义验证规则 4.7.5. 算不上校验的NumberField 4.8. 关于表单内部控件的布局问题 4.8.1. 什么都不做,默认的平铺布局 4.8.2. 分裂,分列 4.8.2.1. 分裂,分列。1.x 4.8.2.2. 分裂,分列。2.0 4.8.3....

    EXT2.0中文教程

    4.7.4. 自定义验证规则 4.7.5. 算不上校验的NumberField 4.8. 关于表单内部控件的布局问题 4.8.1. 什么都不做,默认的平铺布局 4.8.2. 分裂,分列 4.8.2.1. 分裂,分列。1.x 4.8.2.2. 分裂,分列。2.0 4.8.3. ...

Global site tag (gtag.js) - Google Analytics