几行代码解决Grid中文排序错乱的问题

Grid可以实现点击Column Header排序的功能,其对英文/数字排序正常,但是如果是汉字的话,汉字的排序不符合常规(常规的汉字排序是根据GB2313国标字库里的内码顺序来排的,表现到用户界面就是常用汉字按照拼音排序)。
其实这也不算少BUG,毕竟EXT是老外的作品。只要咱们深入 EXT内核,就能发现其排序机理,是通过 EXT.data.Store 的 applySort 函数实现的,原代码如下:

                        applySort: function(){
                                if(this.sortInfo && !this.remoteSort){
                                        var s = this.sortInfo, f = s.field;
                                        var st = this.fields.get(f).sortType;
                                        var fn = function(r1, r2){
                                                var v1 = st(r1.data[f]), v2 = st(r2.data[f]);
                                                return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0); 
                                                //这行是关键:进行两个变量的比较
                                        };
                                        this.data.sort(s.direction, fn);
                                        if(this.snapshot && this.snapshot != this.data){
                                                this.snapshot.sort(s.direction, fn);
                                        }
                                }
                        }


知道了排序原理,我们就可以轻松实现汉字的“正常”排序,其方法是在创建 Ext.data.Store 对象的实例前,重载这个 applySort 函数。代码如下:

                        // 重载 Ext.data.Store.prototype.applySort 函数以修复 DataStore 对汉字排序异常的问题
                        // var _applySort = Ext.data.Store.prototype.applySort;        
                        //如有需要,保存原 applySort 函数的引用
                        Ext.data.Store.prototype.applySort = function(){       
                                 //重载 applySort
                                if(this.sortInfo && !this.remoteSort){
                                        var s = this.sortInfo, f = s.field;
                                        var st = this.fields.get(f).sortType;
                                        var fn = function(r1, r2){
                                                var v1 = st(r1.data[f]), v2 = st(r2.data[f]);
                                                // 添加:修复汉字排序异常的Bug
                                                if(typeof(v1) == "string"){ //若为字符串,
                                                        return v1.localeCompare(v2);
                                                        //则用 localeCompare 比较汉字字符串, Firefox 与 IE 均支持
                                                }
                                                // 添加结束
                                                return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
                                        };
                                        this.data.sort(s.direction, fn);
                                        if(this.snapshot && this.snapshot != this.data){
                                                this.snapshot.sort(s.direction, fn);
                                        }
                                }
                        };
                        var ds = new Ext.data.Store(......);//再创建实例。。。


关键的地方是:对于字符串类型的变量,用本地化的字符串比较函数 localeCompare() 替代原有的简单变量比较。

 

你可能感兴趣的:(ext,prototype,F#,IE,firefox)