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. Go 初体验 - 闭包的几种情况

    闭包: 闭包是可以包含自由(未绑定到特定对象)变量的代码块,这些变量不在这个代码块内或者任何全局上下文中定义,而是在定义代码块的环境中定义.要执行的代码块(由于自由变量包含在代码块中,所以这些自由变量 ...

  2. Python学习笔记(Ⅰ)——Python程序结构与基础语法

    作为微软的粉丝,最后终于向Python低头了,拖了两三个月终于下定决心学习Python了.不过由于之前受到C/C#等语言影响的思维定式,前期有些东西理解起来还是很费了些功夫的. 零.先抄书: 1.Py ...

  3. SQL- 行转列,多行转多列 - max 函数

    效果如图,把同一个 code, 按 cate 列相同行的进行合并后分两行,把mode 每种类型转换成 列名 ,主要用到了 max 函数,很实用 if exists(select * from temp ...

  4. Unity3D判断当前所在平台

    Unity3D是一个跨平台的开发工具,支持的平台五花八门,常常开发一款游戏要发布到不同的平台,在不同的平台上会使用不同的代码,难道要我们各平台分别使用一套代码,单独编译一次吗?当然不用了,呵呵.    ...

  5. Gem install Mysql2的问题

    运行 ‘bundle install’ 或者 ‘gem install mysql2′ 遇到如下错误 > gem install mysql2 ERROR: Error installing m ...

  6. pickel加速caffe读图

    64*64*3小图(12KB),batchSize=128,训练样本100万, 全部load进来内存受不了,load一次需要大半天 训练时读入一个batch,ali云服务器上每个batch读入时间1. ...

  7. oracle 中对查询出来的数据进行切割、截取等操作

    oracle 中对查询出来的数据进行切割.截取等操作 最近遇到一个问题,需要把一个带有,的字符串拆分成多行.通过查询资料,这个操作需要使用以下2个关键知识: 1. REGEXP_SUBSTR函数 这个 ...

  8. CCF CSP 201312-1 出现次数最多的数

    题目链接:http://118.190.20.162/view.page?gpid=T5 问题描述 试题编号: 201312-1 试题名称: 出现次数最多的数 时间限制: 1.0s 内存限制: 256 ...

  9. GO函数

    函数定义 Go语言中定义函数使用func关键字. func 函数名(参数)(返回值){ 函数体 } 函数名:由字母.数字.下划线组成.但函数名的第一个字母不能是数字.在同一个包内,函数名也称不能重名( ...

  10. Spring Cloud Zuul 中文文件上传乱码

    原文地址:https://segmentfault.com/a/1190000011650034 1 描述 使用Spring Cloud Zuul进行路由转发时候吗,文件上传会造成中文乱码“?”.1. ...