ExtJS4.2学习(四)Grid表格中文排序问题



 我们在表格中指定某列排序的时候,我发现排序的时候,中文并没有很好的按照规律排序,国际上都使用ASCII码进行排序,而我们却拼音排序,Ext自动排好的中文在我们看起来是一团糟。8m9思考者日记网-束洋洋个人博客

如下代码数据:8m9思考者日记网-束洋洋个人博客

var data =[  
        ['1','啊','描述01'],  
        ['2','波','描述02'],  
        ['3','呲','描述03'],  
        ['4','嘚','描述04'],  
        ['5','咯','描述05']  
    ];

 8m9思考者日记网-束洋洋个人博客

 8m9思考者日记网-束洋洋个人博客

为了立刻看到效果,我们通过sorters属性来为Ext.data.ArrayStore设置一个默认的排序方式,如下面的代码:8m9思考者日记网-束洋洋个人博客

var store = new Ext.data.ArrayStore({  
        data:data,  
        fields:[  
           {name:'id'}, //mapping:0 这样的可以指定列显示的位置,0代表第1列,可以随意设置列显示的位置  
           {name:'name'},  
           {name:'descn'}  
        ],  
        sorters:[{property:"name",direction:"ASC"}] //给定一个默认的排序方式  
    });

 8m9思考者日记网-束洋洋个人博客

 
 

效果就是下面这样:8m9思考者日记网-束洋洋个人博客

乱.jpg8m9思考者日记网-束洋洋个人博客

解决办法如下代码,你可以把这段代码放到ext-all.js文件的最后,或者放到HTML页面的最上面,总之要在Ext初始化之后,实际代码调用之前执行。8m9思考者日记网-束洋洋个人博客

Ext.data.Store.prototype.createComparator = function(sorters){  
    return function(r1, r2){  
        var s = sorters[0], f=s.property;  
        var v1 = r1.data[f], v2 = r2.data[f];  
          
        var result = 0;  
        if(typeof(v1) == "string"){  
            result = v1.localeCompare(v2);  
            if(s.direction == 'DESC'){  
                result *=-1;  
            }  
        } else {  
            result =sorters[0].sort(r1, r2);  
        }  
          
        var length = sorters.length;  
          
        for(var i = 1; i<length; i ++){  
            s = sorters[i];  
            f = s.property;  
            v1 = r1.data[f];  
            v2 = r2.data[f];  
            if(typeof(v1) == "string"){  
                result = result || v1.localeCompare(v2);  
                if(s.direction == 'DESC'){  
                    result *=-1;  
                }  
            } else {  
                result = result || s.sort.call(this, r1, r2);  
            }  
        }  
        return result;  
    };  
};

 8m9思考者日记网-束洋洋个人博客

现在来运行,效果如下:8m9思考者日记网-束洋洋个人博客

QQ截图20131107233520.jpg8m9思考者日记网-束洋洋个人博客

效果看起来不错。8m9思考者日记网-束洋洋个人博客

 8m9思考者日记网-束洋洋个人博客

ExtJS4.2全部章节汇总目录


 8m9思考者日记网-束洋洋个人博客

ExtJS4.2学习(一)Ext自定义类8m9思考者日记网-束洋洋个人博客

ExtJS4.2学习(二)Ext统一组件模型8m9思考者日记网-束洋洋个人博客

ExtJS4.2学习(三)Grid表格8m9思考者日记网-束洋洋个人博客

ExtJS4.2学习(四)Grid表格中文排序问题8m9思考者日记网-束洋洋个人博客

ExtJS4.2学习(五)表格渲染与复选框8m9思考者日记网-束洋洋个人博客

ExtJS4.2学习(六)表格分页与通过后台脚本获得分页数据8m9思考者日记网-束洋洋个人博客

ExtJS4.2学习(七)EditorGrid可编辑表格8m9思考者日记网-束洋洋个人博客

ExtJS4.2学习(八)表格限制输入数据的类型8m9思考者日记网-束洋洋个人博客

ExtJS4.2学习(九)属性表格控件PropertyGrid8m9思考者日记网-束洋洋个人博客

ExtJS4.2学习(10)分组表格控件--GroupingGrid8m9思考者日记网-束洋洋个人博客

ExtJS4.2学习(11)可拖放的表格8m9思考者日记网-束洋洋个人博客

ExtJS4.2学习(12)基于表格的右键菜单8m9思考者日记网-束洋洋个人博客

ExtJS4.2学习(13)基于表格的扩展插件---rowEditing8m9思考者日记网-束洋洋个人博客

ExtJS4.2学习(14)基于表格的扩展插件(2)8m9思考者日记网-束洋洋个人博客

ExtJS4.2学习(15)树形表格8m9思考者日记网-束洋洋个人博客

 ExtJS4.2学习(16)制作表单8m9思考者日记网-束洋洋个人博客

ExtJS4.2学习(17)表单基本输入控件Ext.form.Field8m9思考者日记网-束洋洋个人博客

 ExtJS4.2学习(18)时间控件8m9思考者日记网-束洋洋个人博客

 ExtJS4.2学习(19)在线编辑器Ext.form.HtmlEditor8m9思考者日记网-束洋洋个人博客

ExtJS4.2学习(20)动态数据表格之前几章总结篇1 8m9思考者日记网-束洋洋个人博客

 ExtJS4.2学习(21)动态菜单与表格数据展示操作总结篇28m9思考者日记网-束洋洋个人博客

ExtJS4.2学习(22)登录界面8m9思考者日记网-束洋洋个人博客

ExtJS4.2学习(23)textFiled后追加按钮8m9思考者日记网-束洋洋个人博客

ExtJS4.2学习(24)TreeStore使用详解8m9思考者日记网-束洋洋个人博客

ExtJS4.2学习(25)终结篇,实战项目8m9思考者日记网-束洋洋个人博客

 

(转载本站文章请注明作者和出处 思考者日记网|束洋洋个人博客 ,请勿用于任何商业用途)

『访问 思考者日记网404页面 寻找遗失儿童』

告知
  •     本站90%以上文章均属原创,部分转载已加上原作者出处。 如需转载本站文章请您务必保留本站出处!
  •     打广告评论者请自重,请为广大网友提供一个健康干净的网络空间。
  • 感谢主机屋提供网站空间;
  • 感谢万网阿里云提供域名解析;
  • 感谢EmpireCMS提供CMS系统;
  • 感谢bootstrap展示本站前端页面;
  • 感谢Glyphicons Halflings提供字体;
  • 感谢大家一直以来对本站的喜爱,感谢大家!
近期文章 建议与反馈