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 中文排序的问题 解决了WEB端和后台(Oracle、MySQL)中文排序问题
JS EasyUI DataGrid动态加载数据
easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格
EasyUI DataGrid过滤用法实例
easyUI datagrid 自动调整行号大小
easyui datagrid editor回车切换单元格示例,适合熟悉easyui但又不懂如何做的人员,可能参考一下源码JS。
easyui datagrid排序图标 默认情况是没有图标的,无法区分哪些列可以排序
两种方法将easyui datagrid 中的数据导出到Excel中,均以验证可以正常使用
easyui datagrid 多条件筛选 可复选 过滤 例如过滤200-300 500-600 类似淘宝筛选 但允许复选
jquery easyui 扩展 datagrid 自定义动态隐藏显示列
DataGrid自定义列标题 DataGrid自定义列标题 DataGrid自定义列标题 DataGrid自定义列标题 DataGrid自定义列标题
easyUI datagrid 实现行上移,下移,置顶,置底,绑定键盘事件 键盘“↑”表示上移,键盘“↓”表示下移,键盘Ctrl+“↑”表示置顶,键盘Ctrl+“↓”表示置底。
jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) Demo 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件,源码奉献!!!
juqery easyui datagrid的排序,当前页面排序。包含数字排序,中文排序,日期排序。
使用SSM框架+EasyUI DataGrid数据表格实现了基本的增删改查,以及对数据分页,排序功能的实现。是一个对于后台管理的很好的例子,因为一般企业后台管理都是使用EasyUI等框架快速搭建,而且DataGrid是EasyUI最重要的...
解决EasyUIdataGrid列比较多,无数据,列展现不全
在easyui 的datagrid编辑状态下实时更新其他处于编辑或者没在编辑下的列值,并在结束编辑后得到的row的数据为更改后的数据。
easyUI datagrid 行上移,下移,置顶,置底的方法
jquery easyui demo 网页下载下来打包了,还有datagrid简要说明
在Easyui的1.3.3版本中,作者新增了tooltip组件,尽管样式看起来也...之前我写过一篇《扩展:datagrid鼠标经过提示单元格内容》那就是用纯编码生成的tip,更为丑陋,有了Easyui 1.3.3的tooltip,我们实现起来就很容易了