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 ...
 
随机推荐
- GTK+介绍
			
GTK+介绍 官方文档 GTK+ 学习 ### 在Ubuntu系统下 $ sudo apt-get intall gtk-3-examples GTK+ 依赖的函数库 Glib 提供了各种各样的语言特 ...
 - (Delphi)第一个Windows 32 API的窗口程序
			
program Project1; uses Winapi.Windows, Winapi.messages; {$R *.res} const className = 'MyDelphiWindow ...
 - J2SE-鸡汤
			
前言 终于开始学java了,心里免不了的开心,总是听老乡说他们公司搞java开发,用的什么什么框架,说的自己都有点眼馋了,但是根据自己的性格,不了解它,肯定不会就去用它的.所以在学习框架之前,java ...
 - maven+selenium+java+testng+jenkins自动化测试
			
最近在公司搭建了一套基于maven+selenium+java+testng+jenkins的自动化测试框架,免得以后重写记录下 工程目录 pom.xml <project xmlns=&quo ...
 - 解决织梦手机网站M文件夹动态游览不生成html
			
今天的做手机网站的时候,发现dede织梦M文件夹下会生成index.html.对于手机网站来说,太麻烦了.每次更新手机网站首页都要把index.html删除掉重新生成. 然而织梦不支持手机网站首页动态 ...
 - Thinkphp手把手练习
			
一.搭建thinkphp开发环境 准备条件:thinkphp框架 1.在Apache的www目录下新建文件夹,命名为thinkphp,可以将THinkPHP框架放在该目录中. 2.在thinkphp目 ...
 - 牛客nowcoder NOIP普及组第三场
			
qtmd AK了 直接题解吧 题目链接 A-十七边形 牛牛想在一个半径为r的圆中,找到一个内接的十七边形,使他的面积最大.输入半径r,输出最大的面积. 1 <= r <= 10000 在1 ...
 - ArrayList深度分析:ArrayList和数组间的相互转换
			
一.ArrayList转换为数组ArrayList提供public <T> T[] toArray(T[] a)方法返回一个按照正确的顺序包含此列表中所有元素的数组,返回数组的运行时类型就 ...
 - shell脚本学习一
			
shell脚本是一种程序与linux内核的语言: 第一个shell脚本: #!/bin/bash echo "cxy" 就是输出cxy 如何执行这个脚本呢: cd demo 进入s ...
 - vue四、实例
			
1.new Vue创建根实例 2.data对象,所有的属性加入到 Vue 响应式系统-值发生改变时,视图自动变更为新值 只有实例被创建时存在的属性才会响应式改变,后增加的不会 vue定义的实例属性和方 ...