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

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

我们在表格中指定某列排序的时候,我发现排序的时候,中文并没有很好的按照规律排序,国际上都使用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" }]  //给定一个默认的排序方式
});

效果就是下面这样:
9e4877c8ace7f67d444307f577f205d6.jpg
解决办法如下代码,你可以把这段代码放到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;
     };
};

现在来运行,效果如下:
32c270a58add1084facac15b2d5cb683.jpg
效果看起来不错。

相关文章
|
2月前
|
前端开发 JavaScript API
|
4月前
|
前端开发 容器
css极速入门 —— grid布局
css极速入门 —— grid布局
40 1
|
前端开发 容器 JavaScript
CSS Grid布局入门
相信大家都比较熟悉flex布局了,最近有空研究了波grid布局,感觉虽然兼容性还不是太高,应用不是太普遍,但是功能非常强大。未来应该是grid+flex为主流,grid是二维布局,很灵活,适合整体构架,而flex是一维布局,适合处理局部细节。
1124 0
|
前端开发 容器
【图片版】CSS网格布局(Grid)完全教程
CSS网格布局(Grid)是一套二维的页面布局系统,它的出现将完全颠覆页面布局的传统方式。传统的CSS页面布局 一直不够理想。包括table布局、浮动、定位及内联块等方式,从本质上都是Hack的方式,并且遗漏了一些重要的功能(比如:垂直居中)。
1338 0
|
JavaScript 前端开发