数据网格(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 数据网格 - 设置排序并自定义排序的更多相关文章

  1. 雷林鹏分享:jQuery EasyUI 数据网格 - 设置排序

    jQuery EasyUI 数据网格 - 设置排序 本实例演示如何通过点击列表头来排序数据网格(DataGrid). 数据网格(DataGrid)的所有列可以通过点击列表头来排序.您可以定义哪列可以排 ...

  2. 雷林鹏分享:jQuery EasyUI 数据网格 - 设置冻结列

    jQuery EasyUI 数据网格 - 设置冻结列 本实例演示如何冻结一些列,当用户在网格上移动水平滚动条时,冻结列不能滚动到视图的外部. 为了冻结列,您需要定义 frozenColumns 属性. ...

  3. 雷林鹏分享:jQuery EasyUI 数据网格 - 自定义排序

    jQuery EasyUI 数据网格 - 自定义排序 如果默认的排序行为不满足您的需求,您可以自定义数据网格(datagrid)的排序行为. 最基础的,用户可以在列上定义一个排序函数,函数名是 sor ...

  4. 雷林鹏分享:jQuery EasyUI 数据网格 - 创建自定义视图

    jQuery EasyUI 数据网格 - 创建自定义视图 在不同的情况下,您可能需要为数据网格(datagrid)运用更灵活的布局.对于用户来说,卡片视图(Card View)是个不错的选择.这个工具 ...

  5. 雷林鹏分享:jQuery EasyUI 数据网格 - 自定义分页

    jQuery EasyUI 数据网格 - 自定义分页 数据网格(datagrid)内置一个很好特性的分页功能,自定义也相当简单.在本教程中,我们将创建一个数据网格(datagrid),并在分页工具栏上 ...

  6. 雷林鹏分享:jQuery EasyUI 数据网格 - 条件设置行背景颜色

    jQuery EasyUI 数据网格 - 条件设置行背景颜色 本教程将向您展示如何根据一些条件改变数据网格(datagrid)组件的行样式.当 listprice 值大于 50 时,我们将为该行设置不 ...

  7. 雷林鹏分享:jQuery EasyUI 数据网格 - 格式化列

    jQuery EasyUI 数据网格 - 格式化列 以下实例格式化在 easyui DataGrid 里的列数据,并使用自定义列的 formatter,如果价格小于 20 就将文本变为红色. 为了格式 ...

  8. 雷林鹏分享:jQuery EasyUI 数据网格 - 添加复选框

    jQuery EasyUI 数据网格 - 添加复选框 本实例演示如何放置一个复选框列到数据网格(DataGrid).通过复选框,用户将可以选择 选中/取消选中 网格行数据. 为了添加一个复选框列,我们 ...

  9. 雷林鹏分享:jQuery EasyUI 数据网格 - 创建页脚摘要

    jQuery EasyUI 数据网格 - 创建页脚摘要 在本教程中,我们将向您展示如何在数据网格(datagrid)页脚显示摘要信息行. 为了显示页脚行,您应该设置 showFooter 属性为 tr ...

随机推荐

  1. myql 服务启动不了怎么办

    今天,不小心手动将mysql 服务停掉后,怎么也启动不了,后面查了半天 ,终于知道要先将任务管理器里的mysql.exe 先Kill掉,然后可以启动了,记录一下

  2. 基于vue框架项目开发过程中遇到的问题总结(二)

    1.mouseup事件丢失 查看了网上资料,造成mouseup事件丢失有两种原因: (1)触发了浏览器的drag事件 (2)由于鼠标离开了操作的区域,触发了mouseleave事件导致mouseup丢 ...

  3. phpstrom 下载及phpStudy环境配置

    1.下载phpstudy 2.打开 3. 4. 5.网站网址   项目路径 新增         host映射 PHP富文本编辑器 6.https://jingyan.baidu.com/articl ...

  4. JS的类型转换

    首先我们要知道,在 JS 中类型转换只有三种情况,分别是: 转换为布尔值 转换为数字 转换为字符串 我们先来看一个类型转换表格 转Boolean 在条件判断时,除了 undefined, null,  ...

  5. windows下eclipse远程连接hadoop集群开发mapreduce

    转载请注明出处,谢谢 2017-10-22 17:14:09  之前都是用python开发maprduce程序的,今天试了在windows下通过eclipse java开发,在开发前先搭建开发环境.在 ...

  6. Opencv常用函数讲解

    1.approxPolyDP(Mat(ps), poly, 5, true);//根据点集,拟合出多边形 2.fillConvexPoly(mask, Mat(ps), Scalar(255));根据 ...

  7. innodb的读写参数优化

    (1)    读取参数,global buffer pool以及 local buffer Innodb_buffer_pool_size,理论上越大越好,建议服务器50%~80%,实际为数据大小80 ...

  8. Camtasia Studio 8卸载不了解决方法

    Win7:%ProgramData%\TechSmith\Camtasia Studio 8\RegInfo.iniWinXP:”%AllUsersProfile%\Application Data\ ...

  9. 读经典——《CLR via C#》(Jeffrey Richter著) 笔记_基元类型(二)

    [基元类型推荐] 推荐直接使用 FCL 类型. [理由] 编码时不至于困惑string与String的使用.由于C#的stirng(一个关键字)直接映射到System.String(一个 FCL 类型 ...

  10. Linux中apache服务

    httpd访问控制生成共享文件vim var/www/html/cq/index.html编辑配置文件 vim /etc/httpd/conf/httpd.conf<Directory &quo ...