我们在使用easyui对列进行自动排序的时候(即顺序倒序),正常情况下是通过设置field中的sortable:true属性来控制是否可以排序。但是我们会发现一个有趣的问题,在对数字进行排序的时候,这个排序功能不怎么好用,当我们对一列金额进行从小到大进行排序,例如1000,200,30,9000。排在最前面的竟然是1000,然后是200,30,9000。这就无法达到我们的要求。

  为什么会出现这种情况,想想应该能发现肯定是easyui排序功能不是按照我们想要的方式进行排序。这个时候我们就可以去阅读easyui的源码,不要害怕这一大堆的源码,硬着头皮去读,当然也有一些技巧,例如先搜索datagird这种组件名,然后搜索对应的属性名sortable,然后就去找其中的实现方式。这个当然还是需要一定的耐心和一定的阅读代码的功底。

  就不说我是如何找到datagrid实现排序的代码,直接上代码:

 if(opt){
var _4a3=opt.sorter||function(a,b){
return (a>b?1:-1);
};

  这段代码中_4a3=opt.sorter||function(){a,b}的意思是指定col的排序方式,可以在options中定义对应的排序方式,如果没有定义就使用默认的排序方式。默认的排序方式就是比较两个元素的大小a>b?1:-1;我们可以给ab赋值,做一下实验。a=12,b=5按照大于返回1,实际上也是返回1。按理说应该是可以进行排序的,但是为什么没能实现排序,问题就处在a和b的类型上。datagrid查询出数据到前端都属于字符串的形式,例如给a="12",b="5",再比较大小,就会返回-1。如何解决呢,我们只需要在这里加上一个转换即可,代码如下:

 var _4e8=opt.sorter||function(a,b){
if(parseFloat(a))
a = parseFloat(a);
if(parseFloat(b))
b = parseFloat(b);
return (a>b?1:-1);
};

  对两个比较字符串进行转换,转换完之后再进行比较大小。而且不要担心,ab是非数字的情况。

  现在又一个更加麻烦的需求,在财务会计中金额往往都需要以千分位的方式显示,这样到前端就无法进行正常排序了。如何解决这个问题,有两个方法。方法一,将千分位转换放到前端来实现,给金额的options中定义一个formatter来进行格式化。方法二,在后台转换千分位,在前端定义一个sorter比较大小方法。

按照源码中的代码可以看出我们还可以通过在options中定义sorter方法来设置比较方式。

  HTML:

 <table id="dg" class="easyui-datagrid" title="DataGrid Selection" style="width:700px;height:250px"
data-options="singleSelect:true,url:'../datagrid/datagrid_data1.json',sorter: sort()">
<thead>
<tr>
<th data-options="field:'itemid',width:80">Item ID</th>
<th data-options="field:'productid',width:100">Product</th>
<th data-options="field:'listprice',width:80,align:'right',sortable: true">List Price</th>
<th data-options="field:'unitcost',width:80,align:'right',sortable: true">Unit Cost</th>
<th data-options="field:'attr1',width:250">Attribute</th>
<th data-options="field:'status',width:60,align:'center'">Status</th>
</tr>
</thead>
</table>

  JS代码:先用replace方法将分隔符例如,转换成空格,这样就形成了一个可强转的数字字符串。然后再

if(parseFloat(a))
3 a = parseFloat(a);
4 if(parseFloat(b))
5 b = parseFloat(b);
6 return (a>b?1:-1);
比较大小,同理,我们也可以定义一些其他的排序方式。今天就写到这里。

  

easyui实现datagrid数字排序问题的更多相关文章

  1. easyui中datagrid标题居中内容居左实现方式

    easyui中的datagrid使用起来,确实还是挺轻巧方便,但是其中也有不少的问题,尤其遇到客户的一些特殊的需求时往往实现得不是很好.这个时候就需要我们自己动手来修改easyui的源码了.easyu ...

  2. 利用Aspose.Cells完成easyUI中DataGrid数据的Excel导出功能

    我准备在项目中实现该功能之前,google发现大部分代码都是利用一般处理程序HttpHandler实现的服务器端数据的Excel导出,但是这样存在的问题是ashx读取的数据一般都是数据库中视图的数据, ...

  3. SSh结合Easyui实现Datagrid的分页显示

    近日学习Easyui,发现非常好用,界面很美观.将学习的心得在此写下,这篇博客写SSh结合Easyui实现Datagrid的分页显示,其他的例如添加.修改.删除.批量删除等功能将在后面的博客一一写来. ...

  4. schemaeasyui实例:SSh结合Easyui实现Datagrid的分页显示

    查了好多资料,发现还是不全,干脆自己整理吧,最少保证在我的做法正确的,以免误导读者,也是给自己做个记载吧! 克日学习Easyui,发现非常好用,界面很雅观.将学习的心得在此写下,这篇博客写SSh结合E ...

  5. 实例:SSh结合Easyui实现Datagrid的分页显示

    近日学习Easyui,发现非常好用,界面很美观.将学习的心得在此写下,这篇博客写SSh结合Easyui实现Datagrid的分页显示,其他的例如添加.修改.删除.批量删除等功能将在后面的博客一一写来. ...

  6. EasyUI中DataGrid构建复合表头

    在使用easyui的DataGrid控件时,构建复合表头就显得非常简单了.只需要在使用columns属性时通过数组的方式编写列名即可.如我们需要构建成一个如下的表头: Columns的代码如下: co ...

  7. EasyUI 的DataGrid中DateTime的格式化问题

    想必用过EasyUI的朋友们都应该会遇到这样的情况吧:(下图) 在EasyUI中DataGrid中如果要显示DateTime的时间时候,便会显示上图这样的格式,很明显,这里的格式不会是我们想要的,我们 ...

  8. easyUI 中datagrid 返回列隐藏方法

    easyui的datagrid方法返回的列,有的值不需要显示可以使用hidden(属性进行隐藏) columns : [ [{ field : 'bailClass', title : '类别', w ...

  9. EasyUI 中 DataGrid 控件 列 如何绑定对象中的属性

    EasyUI 中 DataGrid 控件 是我们经常用到的控件之一, 但是 DataGrid 控件 在绑定显示列时却不支持对象属性绑定. 模型如下: public class Manager impl ...

随机推荐

  1. 给Apache加载rewrite模块后,服务器返回500错误,以及a2enmod命令

    我的机子是Ubuntu. 今天想给url做一个rewrite,让url看起来更漂亮一点.在Apache配置文件(我的是 /etc/apache/apache2.conf)文件中已经把AllOverri ...

  2. bzoj 1027 [JSOI2007]合金(计算几何+floyd最小环)

    1027: [JSOI2007]合金 Time Limit: 4 Sec  Memory Limit: 162 MBSubmit: 2970  Solved: 787[Submit][Status][ ...

  3. Joomla的在线视频播放插件:AllVideos

    一个很好的插件,只需要在文章中插入一条简单的语句就可以实现视频播放,视频可以位于网站服务器上或其他视频网站的. 例如:{f4v}ShaHua-H264{/f4v}   我在使用中只有一个地方觉得需要更 ...

  4. HTC仅限拨打紧急电话

    问题描述: 我手上有台 HTC One V 没碰没撞,突然打不出电话,信号上显示一个叉,屏幕上显示“仅限拨打紧急电话” 解决办法:经百度,原来很多HTC机子都有这种情况,幸好不是硬件坏了,只需按以下步 ...

  5. JAVA虚拟机简介

    Java虚拟机定义 Java虚拟机有多层含义 一套规范:Java虚拟机规范.定义概念上Java虚拟机的行为表现 一种实现:例如HotSpot,J9,JRockit.需要实现JVM规范,但具体实现方式不 ...

  6. Triangle - POJ 2954(求三角形内的格子点的个数)

    Pick公式:平面上以格子点为顶点的简单多边形的面积=边上的点数/2+内部的点数+1. 代码如下: -------------------------------------------------- ...

  7. jni cocos2d-x移植到android:helloworld

    前面搭建好了android开发环境 jni开发环境,那么就来用一用目前火热的cocos2d的游戏引擎吧 所需资料: cocos2d :下载地址  http://www.oschina.net/p/co ...

  8. switch语法中break,default作用说明

    转自:http://cjhbest999.iteye.com/blog/1137124 关于java中switch使用的一些说明 switch(表达式) { case 常量表达式1:语句1; .... ...

  9. [TypeScript] Using Lodash in TypeScript with Typings and SystemJS

    One of the most confusing parts of getting started with TypeScript is figuring out how to use all th ...

  10. Android 完美退出 App (Exit)

    最近两天为了解决Android上面退出程序问题折腾了半死,在google & baidu 上面找了很久.很久出来的完全千篇一律,说的方法有三,但是经过我试验后全部不行. 三个方法分别是: ki ...