ExtJs实现中文表格Grid排序功能详解
需积分: 34 127 浏览量
更新于2024-09-11
收藏 17KB DOCX 举报
在ExtJS表格(grid)的开发中,实现中文排序功能是一项实用且重要的需求。为了满足这一需求,开发者需要重写Ext.data.Store原型上的createComparator()方法,以支持对中文文本进行排序。这个函数的主要作用是在数据存储(Store)的排序过程中,能够正确处理包含中文字符的数据项。
首先,要了解createComparator()方法的作用,它是在数据源进行排序时使用的比较器,根据传入的sorters参数中的规则来决定数据项的顺序。原始的方法默认是基于字符串或数字类型的值进行比较,但当需要处理非ASCII字符,如中文字符时,就需要对其进行扩展。
以下是重写后的createComparator()方法的核心部分:
1. 函数接收一个sorters数组作为参数,每个sorter对象包含两个属性:property(排序字段)和direction(升序或降序)。
2. 首先,检查排序字段的值是否为字符串类型。如果是,使用JavaScript的localeCompare()方法进行比较,该方法能处理多种语言的排序规则,包括中文。localeCompare()会返回一个负数、零或正数,表示两个字符串的相对顺序,如果为负数则表示第一个字符串应排在第二个前面,反之亦然。
3. 如果排序字段的值不是字符串,就调用原始sort()方法进行比较。这适用于字段值为数字或其他已支持排序的类型。
4. 遍历sorters数组中的所有排序规则,对于每一条,重复上述步骤,确保所有指定的排序字段都被考虑在内。
5. 最后,返回比较结果,根据方向设置可能的负号,使得结果符合降序排列的要求。
为了使用这个自定义的排序函数,需要在Ext应用初始化之后,即在实际代码调用createComparator()方法之前将其添加到Ext.data.Store的原型上。可以考虑两种方式插入:一是将其放在ext-all.js文件的末尾,确保其加载在所有其他依赖之后;二是直接在HTML页面的顶部添加,但在Ext应用的初始化函数(如Ext.onReady)之前。
下面是一个简单的验证例子,展示了如何在example_other.js文件中使用这个自定义的createComparator()方法:
```javascript
Ext.onReady(function(){
// 将自定义的排序函数添加到Store原型上
Ext.data.Store.prototype.createComparator = ...;
// 创建一个数据Store实例,并指定排序规则
var store = new Ext.data.Store({
fields: ['字段1', '字段2'],
data: [
{ '字段1': '中文排序1', '字段2': 1 },
{ '字段1': '排序2', '字段2': 2 },
{ '字段1': '中文排序3', '字段2': 3 }
],
sorters: [{ property: '字段1', direction: 'ASC' }] // 示例排序规则,按照字段1升序排序
});
// 应用排序
store.sort();
});
```
通过这种方式,你可以在ExtJS表格grid中实现对中文数据的精确排序,提高了用户体验。
2011-10-16 上传
2013-11-06 上传
242 浏览量
2019-04-13 上传
点击了解资源详情
2019-07-26 上传
2010-07-28 上传
「已注销」
- 粉丝: 1
- 资源: 5
最新资源
- 探索AVL树算法:以Faculdade Senac Porto Alegre实践为例
- 小学语文教学新工具:创新黑板设计解析
- Minecraft服务器管理新插件ServerForms发布
- MATLAB基因网络模型代码实现及开源分享
- 全方位技术项目源码合集:***报名系统
- Phalcon框架实战案例分析
- MATLAB与Python结合实现短期电力负荷预测的DAT300项目解析
- 市场营销教学专用查询装置设计方案
- 随身WiFi高通210 MS8909设备的Root引导文件破解攻略
- 实现服务器端级联:modella与leveldb适配器的应用
- Oracle Linux安装必备依赖包清单与步骤
- Shyer项目:寻找喜欢的聊天伙伴
- MEAN堆栈入门项目: postings-app
- 在线WPS办公功能全接触及应用示例
- 新型带储订盒订书机设计文档
- VB多媒体教学演示系统源代码及技术项目资源大全