Grid可以实现点击Column Header排序的功能,其对英文/数字排序正常,但是如果是汉字的话,汉字的排序不符合常规(常规的汉字排序是根据GB2313国标字库里的内码顺序来排的,表现到用户界面就是常用汉字按照拼音排序)。
其实这也不算少BUG,毕竟EXT是老外的作品。只要咱们深入 EXT内核,就能发现其排序机理,是通过 EXT.data.Store 的 applySort 函数实现的,原代码如下:
applySort: function(){
if(this.sortInfo && !this.remoteSort){
var s = this.sortInfo, f = s.field;
var st = this.fields.get(f).sortType;
var fn = function(r1, r2){
var v1 = st(r1.data[f]), v2 = st(r2.data[f]);
return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
//这行是关键:进行两个变量的比较
};
this.data.sort(s.direction, fn);
if(this.snapshot && this.snapshot != this.data){
this.snapshot.sort(s.direction, fn);
}
}
}
知道了排序原理,我们就可以轻松实现汉字的“正常”排序,其方法是在创建 Ext.data.Store 对象的实例前,重载这个 applySort 函数。代码如下:
// 重载 Ext.data.Store.prototype.applySort 函数以修复 DataStore 对汉字排序异常的问题
// var _applySort = Ext.data.Store.prototype.applySort;
//如有需要,保存原 applySort 函数的引用
Ext.data.Store.prototype.applySort = function(){
//重载 applySort
if(this.sortInfo && !this.remoteSort){
var s = this.sortInfo, f = s.field;
var st = this.fields.get(f).sortType;
var fn = function(r1, r2){
var v1 = st(r1.data[f]), v2 = st(r2.data[f]);
// 添加:修复汉字排序异常的Bug
if(typeof(v1) == "string"){ //若为字符串,
return v1.localeCompare(v2);
//则用 localeCompare 比较汉字字符串, Firefox 与 IE 均支持
}
// 添加结束
return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
};
this.data.sort(s.direction, fn);
if(this.snapshot && this.snapshot != this.data){
this.snapshot.sort(s.direction, fn);
}
}
};
var ds = new Ext.data.Store(......);//再创建实例。。。
关键的地方是:对于字符串类型的变量,用本地化的字符串比较函数 localeCompare() 替代原有的简单变量比较。
分享到:
相关推荐
为了解决这个问题,我们可以重写Ext.data.Store的`applySort`函数,以便在进行本地排序时应用中文排序规则。上述代码正是这样一个解决方案。它将原生的`applySort`函数替换为一个新的版本,其中包含了对中文字符串...
总结起来,解决EXTJS Grid中文排序问题主要涉及到自定义排序函数和利用localeCompare方法。通过这种方式,我们可以确保EXTJS Grid在处理中文数据时能正确排序,提供更好的用户体验。在实际开发中,可能还需要考虑...
这个“html+css几行代码解决京东购物界面.zip”压缩包文件,显然提供了一种简洁的方法来模拟京东购物网站的用户界面。通过分析这个压缩包内的“myjd”文件,我们可以探讨HTML和CSS在创建类似京东购物界面中的关键...
### EXT支持GRID中文排序 #### 知识点详解 在前端开发中,特别是涉及到表格数据展示的应用场景下,对表格中的数据进行排序是一项常见的需求。对于包含中文字符的数据集而言,实现准确、高效的中文排序尤为关键。...
下面是实现中文排序的代码: ```javascript 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....
ag-grid中文一直是个问题,从网上找到了,中文版的js文件,经过改造后,实现了ag-grid中文转换。 在程序中locales中新建文件夹,拷贝,然后在程序中调用。比如 import { AG_GRID_LOCALE_CH } from '@/locales/ag-...
"SimpleGrid - 可拖动,可排序"是一款轻量级的前端表格组件,专为实现数据展示的灵活性和交互性而设计。它兼容IE和Firefox两大主流浏览器,让用户能够轻松地通过拖放操作对表格内容进行排序,极大地提升了用户在处理...
这篇博客“扩展OperamasksUI的grid的排序和显示detail属性”显然聚焦于如何增强Operamasks UI框架的功能,特别是其grid组件。Operamasks UI可能是一个用于构建Web应用的开源库,提供了丰富的组件和功能,便于开发者...
4. **文档内容**:Sigma Grid.docx 文件很可能是详细的使用手册,包含插件安装、基本用法、高级特性和常见问题解答等内容。它可能还提供了代码示例和最佳实践,帮助开发者快速上手并熟练掌握 Sigma Grid。 5. **...
3. **社区资源**:网上有许多关于ag-Grid的讨论和教程,可以从中获取更多实用技巧和解决常见问题的方法。 总之,这个"Ag-Grid Demo2.7z"是学习和探索ag-Grid的一个好起点,无论你是前端开发者还是数据展示需求者,...
3. **gt_grid_all.js**:这可能是Grid的核心JavaScript库,包含了所有Grid的功能实现,包括拖动列、排序、翻页等操作的逻辑代码。 4. **gt_msg_cn.js**:中文消息文件,可能包含错误提示或用户界面文本,方便本地化...
Grid组件在Web应用中广泛使用,因为它提供了强大的数据展示、排序、分页、筛选和编辑功能。以下是对`ExtJS Grid`示例代码的详细解析: 1. **Grid的基本结构** - `Ext.grid.Panel`:这是Grid组件的基础类,它包含了...
Grid++Report是一款强大的报表工具,它允许开发者通过代码来动态地填充数据,从而创建出符合业务需求的复杂报表。这个"Grid++Report报表代码填充数据"主题主要涵盖以下几个方面的知识点: 1. **Grid++Report简介**...
本知识点旨在详细介绍如何在OrCAD中解决打印PDF时出现的Grid黑点问题。 首先,需要了解Grid黑点问题是在什么情况下出现的。Grid指的是OrCAD软件中用于辅助布线和元件摆放的网格,它在打印PDF文件时可能会被错误地...
在这个特定的场景中,我们关注的是如何使`PropertyGrid`中的属性显示为中文,并且支持下拉菜单来选择文本,这在本地化应用或者需要用户从预定义选项中进行选择的场景中非常有用。 `PropertyGrid`控件默认会根据属性...
《sigma_grid与gt_grid API 使用手册教程全解析》 在当今的数据分析和处理领域,高效且易用的工具是至关重要的。"sigma_grid" 和 "gt_grid" 是两个备受推崇的库,它们提供了强大的数据网格处理功能。这篇教程将深入...
在这个文件中,开发者可能能找到一系列VB Grid控件的示例代码,每个例子可能对应一个特定的功能或问题解决方法。 综合以上信息,这篇源代码集合对于想要深入理解VB中Grid控件的开发者非常有价值。通过研究和实践,...
ag-grid我没找到汉化提示的js(没仔细找),下载了官方的社区版js代码,记事本查找替换的,如果没积分可以自己搜索替换,我只改了contains(模糊查找)、not contains(模糊过滤)、equals(精确查找)、not equals...
4. **排序与过滤**:内置排序和过滤功能,用户可以根据需要快速对表格数据进行排序和筛选。 5. **行列拖放**:允许用户通过拖放操作调整行列顺序,提高用户交互性。 6. **分页与滚动**:支持分页显示,同时优化了...
在C# Winform开发中,Devexpress GridControl提供了许多其他高级功能,如分组、排序、过滤、自定义编辑和格式化等,这些都是构建高效数据管理界面的关键组件。熟悉并熟练运用这些特性,能帮助开发者提升应用程序的...