zoukankan      html  css  js  c++  java
  • easyui实现datagrid数字排序问题

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

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

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

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

      这段代码中_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。如何解决呢,我们只需要在这里加上一个转换即可,代码如下:

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

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

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

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

      HTML:

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

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

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

      

  • 相关阅读:
    ajax提交json数据到后端C#解析
    icheck判断是否选中
    sql多列值一行显示
    IDEA 2018 搭建 Spring MVC helloworld
    C# 注册DLL至GAC 并在添加引用中使用该DLL
    Java获取执行进程的dump文件及获取Java stack
    intellij idea搭建SpringBoot
    通过链接跳转登录到另外一个系统
    访问Hsql .data数据库文件
    基于weui的城市选择器(city-picker)
  • 原文地址:https://www.cnblogs.com/TimBing/p/3639525.html
Copyright © 2011-2022 走看看