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 ...
随机推荐
- WGestures鼠标手势快捷手势介绍
1.官方网站 WGestures 2.快截图 3.自定义快捷键列表
- C - 又见GCD
有三个正整数a,b,c(0<a,b,c<10^6),其中c不等于b.若a和c的最大公约数为b,现已知a和b,求满足条件的最小的c. Input第一行输入一个n,表示有n组测试数据,接下来 ...
- 学习高性能mysql
Mysql 的InnoDB存储引擎实现的不是简单的行级锁,实现的是MVCC,多版本并发控制,可以理解成行级锁的一个变种. InnoDB的MVCC是通过在每行纪录后面保存两个隐藏的列来实现的.这两个列, ...
- Angular2使用ng2-file-upload上传文件
Angular2中有两个比较好用的上传文件的第三方库,一个是ng2-file-upload,一个是ng2-uploader.ng2-uploader是一个轻便的上传文件的支持库,功能较弱,而ng2-f ...
- Java整体之JavaEE
思维导图 (Xmind)链接:http://pan.baidu.com/s/1pKTOTRH 密码:oq7f <iframe src="http://www.xmind.net/emb ...
- ASP前端控件设置只读不要用enabled
会导致后台取不到这个控件的值,应该用readonly
- Python翻译器
import urllib.request import urllib.parse import json content='有了我,翻译再也不是问题啦' print(content) while c ...
- 解读人:林山云,Proteomic Identification of Protein Glutathionylation in Cardiomyocytes(心肌细胞蛋白质谷胱甘肽修饰的蛋白质组鉴定)
发表时间:(2019年4月) IF:3.950 单位:韦恩州立大学化学系 物种:小鼠心肌细胞 技术:谷胱甘肽修饰蛋白组学 一. 概述: 本研究采用化学选择性蛋白组学方法,鉴定出过氧化物诱导HL-1小鼠 ...
- 统计元音(stringstream的-应用)
Problem Description 统计每个元音字母在字符串中出现的次数. Input 输入数据首先包括一个整数n,表示测试实例的个数,然后是n行长度不超过100的字符串. Output ...
- POJ1053 Set Me
题目来源:http://poj.org/problem?id=1053 题目大意: 有一种牌,共有81张.每张牌有四个属性,每种属性有三种可能取值:形状(D,O,S),数字(1,2,3),颜色(R,G ...