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

原创 2013年11月04日 13:26:13


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函数,就可以按照数字来排序了

function numberSort(a,b){
 var number1 = parseFloat(a);
 var number2 = parseFloat(b);
 
 return (number1 > number2 ? 1 : -1);  
}


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





EasyUI datagrid列排序

选课系统中对easyUI datagrid排序的功能进行了实践。发现easyui的人性化处理真滴不错。给开发人员带来很大的便利。完整版代码分析给有需要的人。        html代码...
  • lxy344x
  • lxy344x
  • 2016年02月26日 11:48
  • 11190

JQuery easyUI datagrid 排序,使用sorter自定义排序

JQuery easyUI datagrid 排序的使用和实例   1.设置remoteSort(注:此属性默认为true,如果如果是对本地数据排序必须设置为false) 2.设置列...
  • NRlovestudy
  • NRlovestudy
  • 2015年12月17日 14:00
  • 4914

JQuery easyUI datagrid 使用sorter进行前端排序

jQuery easyUI datagrid 排序的使用和实例 1.设置remoteSort(注:此属性默认为true,如果如果是对本地数据排序必须设置为false) 2.设置列的sortabl...
  • H12KJGJ
  • H12KJGJ
  • 2017年06月08日 19:26
  • 1156

jqgrid下treegrid排序问题

项目中用到的jqgrid的treegrid 从后台返回的数据必须是排好序的数据,不然 点击父节点 其直接的子节点 并不是在其 之下。 这个问题相信用jqgrid的treegrid功能的同学都会遇到过。...
  • qq_29542611
  • qq_29542611
  • 2017年06月03日 12:35
  • 445

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

EasyUI Datagrid 前端排序默认采用字符串排序(String类型)。有时候,我们为了让Datagrid里显示的数字精确到一定位数,会将数据转换为字符串传到前台。 例如我们规定价格都精确到...
  • asdsa108
  • asdsa108
  • 2015年12月29日 11:01
  • 1933

easyui表格datagrid自动排序

easyui表格提供了分页和排序的功能,只要通
  • shi_hong_fei_hei
  • shi_hong_fei_hei
  • 2014年06月19日 11:00
  • 2437

easyui datagrid本地分页排序

html代码 加载数据 js代码 var listData = []; $(function(){ $('#dg').datagr
  • lnkToKing
  • lnkToKing
  • 2016年11月18日 10:45
  • 1670

EasyUI自定义排序

sortable : true, sorter:function(a,b){ if(a.length > b.length) ...
  • HUXU981598436
  • HUXU981598436
  • 2013年12月06日 00:15
  • 2463

jquery easyui dataGrid动态改变排序字段名

jquery easyui dataGrid动态改变排序字段名 标签: jqueryeasyuidatagrid排序自定义排序 2015-04-30 15:50 1768人阅读 评论(0)...
  • lvqingyuan
  • lvqingyuan
  • 2017年03月02日 13:42
  • 388

jquery easyui dataGrid动态改变排序字段名

jquery easyui dataGrid 动态改变排序字段名,一般情况下,在使用的时候,我们会点击相应字段进行排序, 这里以JAVA为例,后端的实体类字段有可能和数据库的字段不一致; 如:实体类...
  • lht0211
  • lht0211
  • 2015年04月30日 15:50
  • 3940
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:EasyUI Datagrid 前端按数字排序(自定义排序)
举报原因:
原因补充:

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