jQuery EasyUI 数据网格 - 自定义排序

  如果默认的排序行为不满足您的需求,您可以自定义数据网格(datagrid)的排序行为。

  最基础的,用户可以在列上定义一个排序函数,函数名是 sorter。这个函数将接受两个值,返回值将如下:

  valueA > valueB => 返回 1

  valueA < valueB => 返回 -1

  自定义排序代码

  

  $('#tt').datagrid({

  title:'Custom Sort',

  iconCls:'icon-ok',

  width:520,

  height:250,

  singleSelect:true,

  remoteSort:false,

  columns:[[

  {field:'itemid',title:'Item ID',width:60,sortable:true},

  {field:'listprice',title:'List Price',width:70,align:'right',sortable:true},

  {field:'unitcost',title:'Unit Cost',width:70,align:'right',sortable:true},

  {field:'attr1',title:'Attribute',width:120,sortable:true},

  {field:'date',title:'Date',width:80,sortable:true,align:'center',

  sorter:function(a,b){

  a = a.split('/');

  b = b.split('/');

  if (a[2] == b[2]){

  if (a[0] == b[0]){

  return (a[1]>b[1]?1:-1);

  } else {

  return (a[0]>b[0]?1:-1);

  }

  } else {

  return (a[2]>b[2]?1:-1);

  }

  }

  },

  {field:'status',title:'Status',width:40,align:'center'}

  ]]

  }).datagrid('loadData', data);

  您可以从这段代码中看到,我们为 date 列创建了自定义的 sorter。日期的格式是 'dd/mm/yyyy',可以轻松的按年月日排序。

  下载 jQuery EasyUI 实例

  jeasyui-datagrid-datagrid14.zip

  本文转载自:w3cschool(编辑:雷林鹏 来源:网络 侵删)

雷林鹏分享:jQuery EasyUI 数据网格 - 自定义排序的更多相关文章

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

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

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

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

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

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

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

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

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

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

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

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

  7. 雷林鹏分享:jQuery EasyUI 数据网格 - 创建复杂工具栏

    jQuery EasyUI 数据网格 - 创建复杂工具栏 数据网格(datagrid)的工具栏(toolbar)可以包含按钮及其他组件. 您可以通个一个已存在的 DIV 标签来简单地定义工具栏布局,该 ...

  8. 雷林鹏分享:jQuery EasyUI 数据网格 - 动态改变列

    jQuery EasyUI 数据网格 - 动态改变列 数据网格(DataGrid)列可以使用 'columns' 属性简单地定义.如果您想动态地改变列,那根本没有问题.为了改变列,您可以重新调用dat ...

  9. 雷林鹏分享:jQuery EasyUI 数据网格 - 创建列组合

    jQuery EasyUI 数据网格 - 创建列组合 easyui 的数据网格(DataGrid)可以创建列组合,如下所示: 在本实例中,我们使用平面数据来填充数据网格(DataGrid)的数据,并把 ...

随机推荐

  1. 又见thrift异常之TApplicationException: Internal error processing..

    客户端调用获取商户提现产品手续费的接口,出现异常org.apache.thrift.TApplicationException: Internal error processing getMercha ...

  2. c# 设置开机启动

    private static RegistryKey _rlocal = Registry.LocalMachine.CreateSubKey(@"SOFTWARE\Microsoft\Wi ...

  3. jOrgChart二叉树效果

    引进文件: <link rel="stylesheet" type="text/css" href="Public/com/jQrgChart/ ...

  4. NGUI之使用UISprite画线

    代码如下: static void DrawLine(UISprite spriteLine, Vector3 start, Vector3 end) { Vector3 center = (star ...

  5. 比NGINX更快:nginx-1.15.5 vs mongols-1.2.3

    nginx是多进程web服务器的优秀代表. 本文要用mongols-1.2.3实现一个比nginx更快的多进程的web服务器. mongols是C++ 服务器基础设施库, 它的主要特性如下: tcp ...

  6. C# 将文件夹中文件复制到另一个文件夹

    p{ text-align:center; } blockquote > p > span{ text-align:center; font-size: 18px; color: #ff0 ...

  7. A Simple Nim (SG打表找规律)

    题意:有n堆石子,每次可以将其中一堆分为数量不为0的3堆,或者从其中一堆中拿走若干个,最终拿完的那个人赢. 思路:直接暴力SG状态,然后找出其中的规律,异或一下每一堆的状态就可以了. #include ...

  8. Linux实战

    1.root用户无法删除文件 [root@VM_0_9_centos .ssh]# lsattr authorized_keys ----i----------- authorized_keys ls ...

  9. Java SE中的Synchronized

    1 引言 在多线程并发的编程中Synchronized一直是元老级的角色,很多人会称呼它为重量级锁,但是随着Java SE1.6对Synchronized进行了各种优化以后,有些情况下它并不那么重了. ...

  10. vue-cli3.0+node.js+axios跨域请求session不一样的问题

    一.问题重述 使用的是,前后端分离,前端vue+axios请求,后端使用node搭建服务端接口,遇到的问题是,我通过登录接口吧数据存储型在session,我登录上以后,发现再次验证登录(另一个接口)的 ...