我们在使用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. HDU 5950 Recursive sequence 【递推+矩阵快速幂】 (2016ACM/ICPC亚洲区沈阳站)

    Recursive sequence Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Other ...

  2. MVC批量导出数据方法

    近段时间做了个数据平台,其中涉及到批量导出CSV格式数据的业务,主要使用了部分视图和视图之间传值等知识点,今天做了下整理,特此分享下: 主要分为四步: 1:要打印的数据格式陈列View: 2:自定义导 ...

  3. Unix环境高级编程

    1.  windows下编辑的程序怎么上传到linux下执行? //Service vsftpd status查看linux ftp服务是否开启: Linuxi ip:192.168.40.128 打 ...

  4. 基于.NET平台的分层架构实战(六)——依赖注入机制及IoC的设计与实现[转]

    原文:http://www.cnblogs.com/leoo2sk/archive/2008/06/19/1225223.html 我们设计的分层架构,层与层之间应该是松散耦合的.因为是单向单一调用, ...

  5. UVA 11802 All Your Bases Belong to Us

    题意:这个题题意个人觉得蛮难懂的....意思就是求,把十进制下的n!转化成m进制,末位有且仅有k个连续的0.告诉n和k,求满足题意的m有多少个. 1<= k <= 10^15,n < ...

  6. java.util.concurrent 包笔记 --- BlockingQueue

    BlockingQueue 队列接口,具有 4 组不同的方法用于插入.移除以及对队列中的元素进行检查.如果请求的操作不能得到立即执行的话,每个方法的表现也不同.这些方法如下:   Throws exc ...

  7. .net互转java 转行必备

    .net与java其实是差不多的语言,学习起来只需要弄清楚差异及查库的方法,转起来还是很快的 以下列出几点,希望能给正在转行的你一些帮助 1,java与c#语言超详细对比 http://www.har ...

  8. butterknife简化android开发

    butterknife库非常不错的依赖注入库 使用1  使用2 http://jakewharton.github.io/butterknife/ maven引入 http://www.mvnrepo ...

  9. 20169210《Linux内核原理与分析》第七周作业

    第一部分:实验 首先还是网易云课堂的实验内容,扒开系统调用的三层皮(下),分为两部分: 1.给MenuOS增加time和time-asm命令 2.系统调用在内核代码中的处理过程 给MenuOS增加ti ...

  10. sublimeText3安装package control和禁止弹出更新下载弹窗

    1.sublimeText3安装package control import urllib.request,os; pf = 'Package Control.sublime-package'; ip ...