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
效果看起来不错。

相关文章
|
人工智能 自然语言处理 API
Google Gemma 模型服务:开放的生成式 AI 模型服务
Google Gemma 模型服务:开放的生成式 AI 模型服务
394 4
|
11月前
|
编译器 开发工具 数据安全/隐私保护
Git——多人协作/版本控制,在一个gitee仓库下开发(Gitee版教程)手把手教学,包好用的!
本文提供了一个关于如何在Gitee上进行多人协作和版本控制的详细教程,包括新建和初始化仓库、克隆仓库、邀请好友共同管理仓库以及注意事项,旨在帮助用户顺利进行代码协作开发。
1723 0
Git——多人协作/版本控制,在一个gitee仓库下开发(Gitee版教程)手把手教学,包好用的!
|
存储 自然语言处理 API
通义万相AIGC技术Web服务体验评测
随着人工智能技术的不断进步,图像生成技术已成为创意产业的一大助力。通义万相AIGC技术,作为阿里云推出的一项先进技术,旨在通过文本到图像、涂鸦转换、人像风格重塑及人物写真创建等功能,加速艺术家和设计师的创作流程。本文将详细评测这一技术的实际应用体验。
443 4
|
12月前
|
存储 网络协议 Java
Java NIO 开发
本文介绍了Java NIO(New IO)及其主要组件,包括Channel、Buffer和Selector,并对比了NIO与传统IO的优势。文章详细讲解了FileChannel、SocketChannel、ServerSocketChannel、DatagramChannel及Pipe.SinkChannel和Pipe.SourceChannel等Channel实现类,并提供了示例代码。通过这些示例,读者可以了解如何使用不同类型的通道进行数据读写操作。
181 0
Java NIO 开发
|
12月前
|
Linux
CentOS7系统命令学习笔记(二)
CentOS7系统命令学习笔记(二)
231 10
|
缓存 监控 Shell
使用 HBase Shell 进行数据的实时监控和备份
使用 HBase Shell 进行数据的实时监控和备份
395 6
|
Cloud Native 关系型数据库 分布式数据库
什么是云原生数据库PolarDB分布式版
本文介绍什么是云原生数据库PolarDB分布式版,也称为PolarDB分布式版,本手册中简称为PolarDB-X。
214 0
|
安全 TensorFlow 算法框架/工具
开源大模型与闭源大模型,你更看好哪一方?
开源大模型与闭源大模型,你更看好哪一方?
432 3
|
前端开发 Java 数据库连接
程序技术好文:电脑睡眠(sleep)和休眠(Hibernate)的区别,以及休眠功能的设置
程序技术好文:电脑睡眠(sleep)和休眠(Hibernate)的区别,以及休眠功能的设置
|
数据采集 数据可视化 数据挖掘
数据抽样技术全面概述
抽样是研究和数据收集中不可或缺的方法,能够从更大数据中获得有意义的见解并做出明智的决定的子集。
767 2