EasyUI自定义排序

原创 2013年12月06日 00:15:10
sortable : true,
  					sorter:function(a,b){  
                            if(a.length > b.length) return 1;
    else if(a.length < b.length) return -1;
    else if(a > b) return 1;
    else return -1; 
                        } 

EasyUI Datagrid 前端排序默认采用字符串排序(String类型)。有时候,我们为了让Datagrid里显示的数字精确到一定位数,会将数据转换为字符串传到前台。

例如我们规定价格都精确到两位小数,那么22就转换为字符串“22.00”传到前台,这样虽然保证了精确位数的一致性,但是如果直接利用Datagrid默认的排序功能对这列字符串排序会出现一定问题:


这样,解决方法有两种,一种是将后台传到前台数据不转换,使用整型或者浮点型数据,例如22传到前台显示为22,而22.50传到前台会被显示为22.5,利用这样的数据排序是正确的,但是精确位数发生了变化,这是我们所不希望的。

另一种方法是利用Datagrid的自定义排序sorter进行排序。将字符串先转为浮点数,然后就可以通过自定义函数来实现按照数据大小排序。

sorter function T自定义字段排序函数,有2个参数:
a:该列的第一个值。
b:该列的第二个值。

示例:

$('#dg').datagrid({
	remoteSort: false,
	columns: [[
		{field:'date',title:'Date',width:80,sortable:true,align:'center',  
			sorter:function(a,b){  
				a = a.split('/');  
				b = b.split('/');  
				if (a[2] == b[2]){  
					if (a[0] == b[0]){  
						return (a[1]>b[1]?1:-1);  
					} else {  
						return (a[0]>b[0]?1:-1);  
					}  
				} else {  
					return (a[2]>b[2]?1:-1);  
				}  
			}  
		}
	]]
});

1. 我们在需要排序的列,加入sorter="numberSort"(注:remoteSort=“false”是必须的)
<th field="PRICE" width="120" sortable="true" align="right" halign="center" sorter="numberSort">批发价</th><th field="RTL_PRICE" width="120" sortable="true" align="right" halign="center" sorter="numberSort">零售价</th>

 

2.再具体实现numberSort函数,就可以按照数字来排序了

[javascript] view plaincopy
  1. function numberSort(a,b){  
  2.  var number1 = parseFloat(a);  
  3.  var number2 = parseFloat(b);  
  4.    
  5.  return (number1 > number2 ? 1 : -1);    
  6. }  


自定义排序,这样后台传来的数据依然保持精确位数,依然为字符串,而在前台我们将其转为浮点数,通过自定义排序方法按照浮点数真实大小排序。





版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

EasyUI Datagrid 前端按数字排序(自定义排序)

EasyUI Datagrid 前端排序默认采用字符串排序。有时候我们为了确保Datagrid里显示的数字精确到一定位数,会将数据转换为字符串传到前台。例如我们规定价格都精确到两位小数,那么22就转换...

easyui 分页,排序自定义

bulletin欢迎页面 var page=1; //页码 var rows=10; //页面大小 var sort="id"; //默...

easyui datagrid标题拖拽自定义配置

  • 2016年11月26日 16:42
  • 1010KB
  • 下载

java数组自定义排序

  • 2017年10月31日 15:35
  • 680B
  • 下载

EasyUI中使用自定义的icon图标

我们在web开发中为了界面的更加漂亮,我们可能会使用EasyUI框架来帮我们实现一些好看的效果,那么在框架里面提供了很多的样式和图标,但是有时候自带的图标已经满足不了我们啦,这时候我们应该往里卖弄加入...

自定义制作数据排序数据;

  • 2013年07月10日 19:28
  • 192KB
  • 下载

easyui datagrid自定义按钮列,即最后面的操作列(第二种方法)

做项目的时候因为需求,要在表格的最后添加一列操作列,easyUI貌似没有提供这种功能,不过没关系,我们可以自定义来实现 版本:jquery easyUI 1.3.2...
  • thc1987
  • thc1987
  • 2014年06月24日 16:54
  • 1440
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:EasyUI自定义排序
举报原因:
原因补充:

(最多只允许输入30个字)