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

简介:

我们在表格中指定某列排序的时候,我发现排序的时候,中文并没有很好的按照规律排序,国际上都使用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
效果看起来不错。


本文转自shyy8712872 51CTO博客,原文链接:http://blog.51cto.com/shuyangyang/1330925,如需转载请自行联系原作者


相关文章
|
监控 安全 网络安全
使用EventLog Analyzer日志分析工具监测 Windows Server 安全威胁
Windows服务器面临多重威胁,包括勒索软件、DoS攻击、内部威胁、恶意软件感染、网络钓鱼、暴力破解、漏洞利用、Web应用攻击及配置错误等。这些威胁严重威胁服务器安全与业务连续性。EventLog Analyzer通过日志管理和威胁分析,有效检测并应对上述威胁,提升服务器安全性,确保服务稳定运行。
389 2
bootstrapTable多选设置
bootstrapTable多选设置
351 0
|
IDE 开发工具 Python
10分钟教你用Python实现微信自动回复
10分钟教你用Python实现微信自动回复
3503 0
10分钟教你用Python实现微信自动回复
|
缓存 前端开发 NoSQL
基于springboot实现快递代取管理系统
本项目基于springboot框架开发而成,前端采用bootstrap和layer框架开发,系统功能完整,界面简洁大方,比较适合做毕业设计使用。 本项目主要实现了代取快递的信息管理功能,使用角色有三类:一是客户可以直接访问系统下单,输入代取快递的相关信息,并可以在系统中查询订单的完成进度,也可以对系统进行相应的反馈并查询反馈的回复情况。也可以直接在线支付代取费用。二是接单员,可以登陆系统进行接单,并根据自己的订单完成情况修改订单状态,查询自己的订单等。三是系统管理员,可以实现对人员和订单信息的管理,对反馈信息的回复等操作。
465 1
基于springboot实现快递代取管理系统
|
XML Java 数据库连接
SpringBoot入门,这一篇就够了(一)
SpringBoot入门,这一篇就够了
SpringBoot入门,这一篇就够了(一)
|
弹性计算 关系型数据库 MySQL
|
SQL 分布式计算 供应链
慢sql治理经典案例分享
菜鸟供应链金融慢sql治理已经有一段时间,自己负责的应用持续很长时间没有慢sql告警,现阶段在推进组内其他成员治理应用慢sql。这里把治理过程中的一些实践拿出来分享下。
慢sql治理经典案例分享
|
网络虚拟化
【eNSP 华为模拟器】vlan划分实验【图文】
【eNSP 华为模拟器】vlan划分实验【图文】
662 0
【eNSP 华为模拟器】vlan划分实验【图文】
|
人工智能 边缘计算 大数据
|
Java Linux 开发者
Powershell教程(2)——自定义模块Module语法
Powershell教程(2)——自定义模块Module语法
910 0
Powershell教程(2)——自定义模块Module语法