`
atian25
  • 浏览: 470253 次
  • 性别: 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 grid 中文排序问题修正

    总结起来,解决EXTJS Grid中文排序问题主要涉及到自定义排序函数和利用localeCompare方法。通过这种方式,我们可以确保EXTJS Grid在处理中文数据时能正确排序,提供更好的用户体验。在实际开发中,可能还需要考虑...

    EXTJS grid导出EXCEL文件

    1. **EXTJS Grid组件**:EXTJS Grid是EXTJS的核心组件之一,它允许开发者创建可分页、可排序、可过滤的数据表格。Grid可以与各种数据源(如JSON、XML或内存中的数组)配合使用,并通过Store对象进行数据的加载和管理...

    EXTJS Grid总结例子

    EXTJS Grid是一款强大的数据展示组件,广泛应用于Web应用开发中,尤其在数据密集型界面设计时,EXTJS Grid以其高效的数据加载、灵活的分页、排序、过滤和自定义功能而受到开发者青睐。本总结例子将深入探讨EXTJS ...

    extjs grid

    EXTJS Grid提供了丰富的功能,包括分页、排序、过滤、编辑等,使得用户可以高效地管理和处理数据。EXTJS 4.2.1是EXTJS的一个稳定版本,它包含了多项改进和新特性,以提升用户体验和开发者的工作效率。 在EXTJS ...

    extjs grid示例代码

    ExtJS Grid是Sencha ExtJS框架中的一个核心组件,它用于构建数据驱动的表格视图。Grid组件在Web应用中广泛使用,因为它提供了强大的数据展示、排序、分页、筛选和编辑功能。以下是对`ExtJS Grid`示例代码的详细解析...

    extjs grid 多表头插件

    7. Customization(自定义):除了基本的多表头功能,还可以通过扩展和定制实现更复杂的需求,例如自定义排序、过滤和分组逻辑。 在"groupheader"这个文件中,可能包含了实现多表头功能的示例代码、配置文件或样式...

    Extjs Grid 扩展实例

    若需更多自定义排序逻辑,可以监听`sortchange`事件,然后在后端处理排序逻辑。 6. **事件处理**:Grid提供多种事件,如`itemclick`、`itemdblclick`、`beforeedit`、`afteredit`等,可以用于响应用户操作。通过...

    Extjs grid分页1

    ExtJS Grid 分页是Web应用中数据展示的重要组成部分,它允许用户高效地浏览大量数据而无需一次性加载所有记录。在本文中,我们将深入探讨ExtJS Grid的分页功能及其实现方式。 首先,ExtJS Grid是一种强大的...

    ExtJS_grid.rar_Grid javascript_extjs grid

    - **Grid Panel**:是ExtJS中的一个核心组件,用于显示二维数据,可以进行排序、筛选、分页等操作。 - **Store**:存储Grid的数据,可以是从服务器获取的JSON、XML或Array格式的数据,也可以是本地数据。 - **...

    Extjs动态GRID

    EXTJS Grid支持自定义表头菜单,用户可以通过右键点击表头来选择排序、隐藏列等操作。开发者可以自定义这个菜单,添加更多功能,如列过滤、列锁定等。 6. 数据源绑定: EXTJS Grid的数据通常来源于Store,一个数据...

    Extjs4 grid使用例子

    此外,还可以添加额外的功能,如排序、锁定列、自定义渲染等。 5. **增删改功能**: 在Grid中实现编辑功能通常涉及行内编辑或弹出编辑窗口。ExtJS4提供了多种编辑模式,如CellEditing、RowEditing等。增删改操作...

    ExtJs6.5Grid列表导出(包含样式)

    本文将深入探讨如何利用ExtJs的相关控件类来实现一个自定义的Grid列表导出功能,同时保持列表的样式。 首先,理解ExtJs Grid的基本结构至关重要。Grid是一个可配置的组件,用于显示数据集并提供交互式功能,如排序...

    ExtJs grid导出Excel

    在ExtJs中,Grid组件是展示大量数据的重要工具,它提供了丰富的功能,包括排序、分页、筛选等。当需要将Grid中的数据导出到Excel时,可以采用两种方法,这些方法在ExtJs 4.2版本中已经得到很好的支持。 **方法一:...

    extjs grid.panel 项目 源码

    Grid Panel是ExtJS中的一个核心组件,它允许开发者以表格的形式展示大量数据,并提供多种交互功能,如排序、分页、筛选等。在基于ExtJS Form表单的项目中,Grid Panel通常用于显示和编辑由Form表单收集或处理的数据...

    ExtJs动态grid的生成

    - Grid的顶部通常包含一个工具栏,可以动态添加按钮或其他UI元素,提供搜索、排序或过滤等功能。这些功能可以通过`dockedItems`配置项实现。 6. **Autogrid.js可能的用途** - 文件名"Autogrid.js"暗示可能是一个...

    Extjs Grid+apsx+json Demo

    ExtJS Grid是一款强大的JavaScript数据网格组件,常用于构建数据密集型Web应用,提供丰富的功能,如排序、分页、过滤、编辑等。在"Extjs Grid+asp.net+json Demo"中,我们将探讨如何结合ExtJS Grid、ASP.NET以及JSON...

    extjs表格Grid比较全面的功能

    Grid的列可自定义,包括列的类型(文本、数字、日期等)、宽度、可排序性、可编辑性等。通过配置列模板,可以显示复杂的格式化数据,如使用计算字段或链接。 4. **分页(Paging)** 对于大量数据,Grid支持分页...

    EXTjs grid双层表头的实现 (源代码和示例)

    在EXTjs中,grid组件是用于展示大量数据的常用组件,它可以提供灵活的布局、排序、筛选等功能。本篇将重点讲解如何在EXTjs中实现双层表头,以及通过提供的源代码`GridDoubleHeader.js`来理解其实现细节。 EXTjs的...

    Extjs4下拉菜单ComboBox中用Grid显示通用控件

    - `GridPanel` 是EXTJS中用于展示表格数据的组件,它可以灵活地处理大量数据,并提供排序、分页、过滤等功能。 - 在 `GridComboBox` 中,`GridPanel` 作为下拉菜单的内容,使用户能以表格形式查看和选择数据。 3....

    ExtJS5学习之Grid与Grid之间的数据拖拽

    在"ExtJS5学习之Grid与Grid之间的数据拖拽"这个主题中,我们将深入探讨如何实现这种交互功能,以及背后的机制和重要知识点。 首先,我们要了解ExtJS的Grid组件。Grid是一种可配置的表格视图,它可以显示大量的结构...

Global site tag (gtag.js) - Google Analytics