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 ...
随机推荐
- c# 时间格式处理,获取格式: 2014-04-12T12:30:30+08:00
C# 时间格式处理,获取格式: 2014-04-12T12:30:30+08:00 一.获取格式: 2014-04-12T12:30:30+08:00 方案一:(局限性,当不是当前时间时不能使用) ...
- Android下创建一个输入法
输入法是一种可以让用户输入文字的控件.Android提供了一套可扩展的输入法框架,使得应用程序可以让用户选择各种类型的输入法,比如基于触屏的键盘输入或者基于语音.当安装了特定输入法之后,用户即可在系统 ...
- Info.plist文件配置及注意事项
1.Info.plist文件配置 常见配置 2.注意事项 Info.plist文件移动路径修改编译报错:could not read data from '/Users/lelight/Desktop ...
- Python从小看到大
最近迷恋上了python,因为一个朋友说python这种脚本语言很厉害,可以做网络攻防的时候用,但是由于自己太笨了,不得不从基础教程学起. 行左右.你可能会问为什么这么少的代码量,这门语言没有火起来, ...
- jmeter - 录制web网页
1. 打开JMeter工具 创建一个线程组(右键点击“测试计划”--->“添加”---->“线程组”) 创建一个http代理服务器(右键点击“工作台”--->“添加”-- ...
- CF877E Danil and a Part-time Job 线段树维护dfs序
\(\color{#0066ff}{题目描述}\) 有一棵 n 个点的树,根结点为 1 号点,每个点的权值都是 1 或 0 共有 m 次操作,操作分为两种 get 询问一个点 x 的子树里有多少个 1 ...
- 解决spring使用动态代理
解决spring使用动态代理类型转换失败的问题--java.lang.ClassCastException: com.sun.proxy.$Proxy$ cannot be cast to ... 转 ...
- Spring Boot学习资料汇总
1. SpringFramework 重点学习 IOC容器,Web MVC framework,AOP 等 官网文档 http://docs.spring.io/spring/docs/cur ...
- 基于APPIUM测试微信公众号的UI自动化测试框架(结合Allure2测试报告框架)
框架初衷 前两周组内的小伙伴跟我说她现在测试的微信公众号项目(保险)每次上新产品时测试起来很费时,存在大量的重复操作(点点点),手工测试每个产品可能需要半天到一天的时间,复杂的产品需要两天. 由于保险 ...
- Oozie的缺点
Oozie使用的时候有以下不便: [a]Oozie调度的Workflow只能使用XML文件配置 [b]启动调度只能通过命令行 [c]无法通过Oozie界面调试调度脚本 [d]Oozie无法可视化调试脚 ...