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)中文排序问题
easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格
JS EasyUI DataGrid动态加载数据
自定义easyui datagrid的行编辑器,实现颜色选择。 依赖类库版本; jquery-1.8.0.js jquery-easyui-1.3.1
EasyUI DataGrid过滤用法实例
DataGrid自定义列标题 DataGrid自定义列标题 DataGrid自定义列标题 DataGrid自定义列标题 DataGrid自定义列标题
easyUI datagrid 自动调整行号大小
easyui datagrid editor回车切换单元格示例,适合熟悉easyui但又不懂如何做的人员,可能参考一下源码JS。
easyui datagrid排序图标 默认情况是没有图标的,无法区分哪些列可以排序
两种方法将easyui datagrid 中的数据导出到Excel中,均以验证可以正常使用
easyui datagrid 多条件筛选 可复选 过滤 例如过滤200-300 500-600 类似淘宝筛选 但允许复选
jquery easyui 扩展 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 行上移,下移,置顶,置底的方法
在easyui 的datagrid编辑状态下实时更新其他处于编辑或者没在编辑下的列值,并在结束编辑后得到的row的数据为更改后的数据。
jquery easyui demo 网页下载下来打包了,还有datagrid简要说明