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

在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中实现对中文数据的精确排序，提高了用户体验。