EasyUI 数据网格 - 设置排序并自定义排序
数据网格(DataGrid)的所有列可以通过点击列表头来排序。您可以定义哪列可以排序。默认的,列是不能排序的,除非您设置 sortable 属性为 true。
当排序时,数据网格(DataGrid)将发送两个参数到远程服务器:
- sort:排序列字段名。
- order:排序方式,可以是 'asc' 或者 'desc',默认值是 'asc'。
EasyUI Datagrid 前端排序默认采用字符串排序(String类型)。有时候,我们为了让Datagrid里显示的数字精确到一定位数,会将数据转换为字符串传到前台。
而EasyUI 提供的 sortable: 'true' 方法只是对字符串进行了排序 ,结果如图所示:
本人实际项目中需求是将后台传过来的数据保留三位有效数字且对列数据进行排序操作:
{
field: 'Attained', title: '偏离度(%)', width: 80, align: 'center', sortable: 'true',
//格式化数据保留三位有效数字
formatter: function (value,row,index) {
if(row != null)
return (parseFloat(value).toFixed(3) + '').replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,');
//数据排序
}, sorter: function (a, b) {
if (parseFloat(a))
a = parseFloat(a);
if (parseFloat(b))
b = parseFloat(b);
return (a > b ? 1 : -1);
}
},
自定义排序,这样后台传来的数据依然保持精确位数,依然为字符串,而在前台我们将其转为浮点数,通过自定义排序方法按照浮点数真实大小排序。
项目实际效果图 如下所示:
EasyUI 数据网格 - 设置排序并自定义排序的更多相关文章
- 雷林鹏分享:jQuery EasyUI 数据网格 - 设置排序
jQuery EasyUI 数据网格 - 设置排序 本实例演示如何通过点击列表头来排序数据网格(DataGrid). 数据网格(DataGrid)的所有列可以通过点击列表头来排序.您可以定义哪列可以排 ...
- 雷林鹏分享:jQuery EasyUI 数据网格 - 设置冻结列
jQuery EasyUI 数据网格 - 设置冻结列 本实例演示如何冻结一些列,当用户在网格上移动水平滚动条时,冻结列不能滚动到视图的外部. 为了冻结列,您需要定义 frozenColumns 属性. ...
- 雷林鹏分享:jQuery EasyUI 数据网格 - 自定义排序
jQuery EasyUI 数据网格 - 自定义排序 如果默认的排序行为不满足您的需求,您可以自定义数据网格(datagrid)的排序行为. 最基础的,用户可以在列上定义一个排序函数,函数名是 sor ...
- 雷林鹏分享:jQuery EasyUI 数据网格 - 创建自定义视图
jQuery EasyUI 数据网格 - 创建自定义视图 在不同的情况下,您可能需要为数据网格(datagrid)运用更灵活的布局.对于用户来说,卡片视图(Card View)是个不错的选择.这个工具 ...
- 雷林鹏分享:jQuery EasyUI 数据网格 - 自定义分页
jQuery EasyUI 数据网格 - 自定义分页 数据网格(datagrid)内置一个很好特性的分页功能,自定义也相当简单.在本教程中,我们将创建一个数据网格(datagrid),并在分页工具栏上 ...
- 雷林鹏分享:jQuery EasyUI 数据网格 - 条件设置行背景颜色
jQuery EasyUI 数据网格 - 条件设置行背景颜色 本教程将向您展示如何根据一些条件改变数据网格(datagrid)组件的行样式.当 listprice 值大于 50 时,我们将为该行设置不 ...
- 雷林鹏分享:jQuery EasyUI 数据网格 - 格式化列
jQuery EasyUI 数据网格 - 格式化列 以下实例格式化在 easyui DataGrid 里的列数据,并使用自定义列的 formatter,如果价格小于 20 就将文本变为红色. 为了格式 ...
- 雷林鹏分享:jQuery EasyUI 数据网格 - 添加复选框
jQuery EasyUI 数据网格 - 添加复选框 本实例演示如何放置一个复选框列到数据网格(DataGrid).通过复选框,用户将可以选择 选中/取消选中 网格行数据. 为了添加一个复选框列,我们 ...
- 雷林鹏分享:jQuery EasyUI 数据网格 - 创建页脚摘要
jQuery EasyUI 数据网格 - 创建页脚摘要 在本教程中,我们将向您展示如何在数据网格(datagrid)页脚显示摘要信息行. 为了显示页脚行,您应该设置 showFooter 属性为 tr ...
随机推荐
- Python3中装饰器的使用
较为复杂的装饰器使用: user,passwd = 'hjc',111111 def auth(type): print('auth type:',type) def outwrapper(func) ...
- 基于pythpn的深度学习 - 记录
[基于pythpn的深度学习] 环境: windows/linux-ubuntu Tensorflow (基于anaconda) *安装 (python3.5以上不支持) ...
- 解决VMware Workstation 不可恢复错误: (vcpu-0)
转载:http://tieba.baidu.com/p/3487673152 如图的错误 如果你按照破解了mac支持的VMware Workstation 11的新建虚拟机向导一步一步创建了一个mac ...
- day01.1-计算机体系与数据描述
一. 指令执行过程 二. 计算机体系架构 其中,ROM所存数据较为 ...
- SQLException: Incorrect string value: '\xE4\xB8\xAD\xE5\x9B\xBD' for column at row 1
这个是由于新建数据库没有选择默认字符集导致的,只要选择utf8即可. 如果以上还无法解决,那可能是表里的varchar字符集也不对
- P2866 [USACO06NOV]糟糕的一天Bad Hair Day
题意:给你一个序列,问将序列倒过来后,对于每个点,在再碰到第一个比它大的点之前,有多少比它小的? 求出比它小的个数的和 样例: 610374122 output: 5 倒序后:2 12 4 ...
- DP【洛谷P2363】马农
[洛谷P2363]马农 题目描述 在观看完战马检阅之后,来自大草原的两兄弟决心成为超级"马农",专门饲养战马. 兄弟两回到草原,将可以养马的区域,分为N*N的单位面积的正方形,并实 ...
- CF709A Juicer 模拟
Kolya is going to make fresh orange juice. He has n oranges of sizes a1, a2, ..., an. Kolya will put ...
- (转)接口自动化测试之http请求实践总结
一.接口测试的基本思路 1.确定要测试接口的请求类型.接口是get请求还是post请求. 2.确定接口的参数.需要传输的参数有哪些,类型分别是什么,都有哪些要求等. 3.按照参数要求构造请求需要的参数 ...
- javascript 获取当前 URL 参数的两种方法
window.location.host; //返回url 的主机部分,例如:www.xxx.com window.location.hostname; //返回www.xxx.com window. ...