且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2022-06-26 23:21:34

我们在表格中指定某列排序的时候,我发现排序的时候,中文并没有很好的按照规律排序,国际上都使用ASCII码进行排序,而我们却拼音排序,Ext自动排好的中文在我们看起来是一团糟。

如下代码数据:

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

为了立刻看到效果,我们通过sorters属性来为Ext.data.ArrayStore设置一个默认的排序方式,如下面的代码:

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

效果就是下面这样:
ExtJS4.2学习(四)Grid表格中文排序问题
解决办法如下代码,你可以把这段代码放到ext-all.js文件的最后,或者放到HTML页面的最上面,总之要在Ext初始化之后,实际代码调用之前执行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
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;
    };
};

现在来运行,效果如下:
ExtJS4.2学习(四)Grid表格中文排序问题
效果看起来不错。