ExtJs实现中文表格Grid排序功能详解

需积分: 34 4 下载量 156 浏览量 更新于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中实现对中文数据的精确排序,提高了用户体验。