之前我的导师,也就是带我的同事,使用datagrid,发现点击列表头排序出现乱序,按理说只有顺序和逆序两种排序结果。因为他比较忙,当时没解决,把排序禁掉了,后来又要求一定要排序,所以他交给我。

一开始不知道什么原因,看了别的地方用到datagrid的都没有问题,因为我们这边的datagrid有20列左右,当时没有每一列都测试,只是测试了前面的,基本上都出现乱序,为了简单,删除一些列,然后再测试,发现有一列没问题,仔细分析代码,排序好的列的formatter中,return变量的格式是row.A,而其他不好的列的formatter中return的格式是row.A.B或者row.A.B.C,初步假设是这个导致的,后来参考一篇博客,关于自定义排序,在我们的代码中使用自定义排序,发现排序出错的的列的sorter:function(a,b)
中,a和b的值都是undefine,而排序好的列则是正确的值。排序正确的列在formatter中value是正确的,而排序不对的列在formatter中value为undefine,所以可以确定是row.A.B.C这种方式导致的,后来想在field中写A.B.C,发现也不可以。

一同事说在后台返回的时候增加一个字段,把多级属性变为一级属性,这样就解决了问题,只是这样增加了空间开销,感觉不太好,希望可以找到一种更好的解决方法,也许以后easyui会增加field对多级属性的支持。刚好找到一篇文章(参考http://blog.csdn.net/jianyi7659/article/details/9736871),说field不支持属性带子属性的格式,博客中说用修改jquery.easyui.min.js中第8670行:
//var _644=_641[_643];
var _644=eval("_641['"+_643.replace(/\./g,"']['")+"']");

发现点击排序还是乱序,不过在jquery.easyui.min.js文件测试,发现field中用A.B.C可以得到值,但是sorter:function(a,b) 中,a和b的值都还是undefine,后来想到,如果找到sort函数的源代码,然后确保a和b取到值,应该就可以了,所以找到

data.rows.sort(function(r1,r2){
return _51e(r1[opts.sortName],r2[opts.sortName])*(opts.sortOrder=="asc"?1:-1);
});
},

修改为如下,

data.rows.sort(function (r1, r2) {
                    var r1data = eval("r1['"+opts.sortName.replace(/\./g,"']['")+"']");
                    var r2data = eval("r2['"+opts.sortName.replace(/\./g,"']['")+"']");
                    return _51e(r1data, r2data) * (opts.sortOrder == "asc" ? 1 : -1);
                });

},

测试发现排序就正确了,不过对于日期排序还是不准确,但这不是因为undefined值引起的,而是由于值存在一些特殊字符,比如说空格和斜杠等引起的,可以自定义排序函数实现。

easyui datagrid 点击列表头排序出现错乱的原因的更多相关文章

  1. JQuery easyUI DataGrid 创建复杂列表头(译)

    » Create column groups in DataGrid The easyui DataGrid has ability to group columns, as the followin ...

  2. [WPF]ListView点击列头排序功能实现

    [转]   [WPF]ListView点击列头排序功能实现 这是一个非常常见的功能,要求也很简单,在Column Header上显示一个小三角表示表示现在是在哪个Header上的正序还是倒序就可以了. ...

  3. MFC listcontrol 分列 添加行数据 点击列头排序

    适用于 对话框程序 1.在工具箱中拖出 ListControl,然后右键-属性,view-Report 让你的ListControl变成这幅模样! 2.添加ListControl控件的control类 ...

  4. C#:ListView控件如何实现点击列表头进行排序?

    using System; using System.Collections; using System.Windows.Forms; namespace Common { /// <summa ...

  5. easyui datagrid 点击表头的事件

    在用datagrid的时候我们可能要用到点击表头来触发一个function,这里有个简单的例子. 首先你得有个能用的datagrid. <div>    <table id=&quo ...

  6. C++ 简单实现MFC ListControl 点击列头排序

    说明: SetItemData可以为每一行绑定一个DWORD类型的变量.用GetItemData可以获得这个变量.举个例子,假设CListCtrl中你需要显示某个数据表中的记录,该表有个流水号主键ID ...

  7. 【转】 jquery easyui datagrid使用,分页、排序、查询

    $('#dg').datagrid({ url: "xxx.ashx",                    pagination: true,                p ...

  8. WPF DataGrid点击列头选择全列并具有背景色

    完成这个操作,主要是XAML的代码. 主要思路是通过绑定多路数据,在多路转换器中返回布尔值,在通过数据触发器来设置被选择的全列的背景色. XAML页面主要代码 首先定义DataGridCell < ...

  9. datagrid点击标题进行排序

    步骤: 1.页面上首先设置datagrid的AllowSorting="true",以及指定排序方法OnSortCommand="DataGrid1_SortComman ...

随机推荐

  1. Java单例模式实现(线程安全)

    package com.javaee.corejava; /** * 线程安全的单例模式 * @author miaoyf * */ public class Singleton { /** * 私有 ...

  2. [MySQL] 高可用架构MMM简单介绍

    一.来源及原理: 众所周知,MySQL自身提供了AB复制(主从复制),然后可以很轻松实现master-master双向复制,同时再为其中一个Master节点搭建一个Slave库. 这样就实现了MySQ ...

  3. C++ vector erase函数的使用注意事项

    最近使用了顺序容器的删除元素操作,特此记录下该函数的注意事项. 在C++primer中对c.erase(p) 这样解释的:  c.erase(p)    删除迭代器p所指向的元素,返回一个指向被删元素 ...

  4. javascript函数中变量重名

    <script type="text/javascript"> function fun(a){ console.log(a); // function var a=1 ...

  5. Python-3 语法

    #1 Tab键: 1)控制缩进 2)IDLE智能补全 #2 =等号: 1)=:表示赋值 2)==:表示判断 #3 流程图: print('..........小甲鱼_1..........') tem ...

  6. logback 配置

    logback 配置 logback的配置方式包括:编程配置.XML文件配置.Groovy文件配置.对于使用log4j的用户,还可以通过logback提供的工具( http://logback.qos ...

  7. android微信分享要注意的地方

    最近在做android端分享的功能,在微信开放平台查看了下官网上的开发文档,一步一步的按文档上的步骤来: 1.申请你的AppID 2.下载开发工具包 3.搭建开发环境,引入libammsdk.jar文 ...

  8. C#如何分割多个空格分隔的字符串?

    using System; using System.Text; using System.Text.RegularExpressions; namespace test { class Progra ...

  9. 【JAVA】【Eclipse】出现This element neither has attached source nor attached Javadoc...的解决方法

    This element neither has attached source nor attached Javadoc and hence no Javadoc could be found Ec ...

  10. leetcode 206

    206. Reverse Linked List Reverse a singly linked list. 翻转一个单链表. 代码如下: /** * Definition for singly-li ...