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. PHP 十万数字不同数组取最大的5个 (经典面试题topK) (原)

    $arr = array(3,5,7,8,1,2,456,78,...101,2345,456); 类似上述数组,共有十万个元素,让我们取出TOP5,下面是我的解法,先上代码再讲解思路 functio ...

  2. linux----------fedora 27 如何启用输入法

    1.安装完成以后是自带了输入法的,但是需要启用. 一定要放到第一个位置,然后注销或者重启.

  3. 排序之选择排序(SelectSort)

    package com.sort; /* * 选择排序 * 把第一位与其他数进行比较,这样每轮比较都会出现一个最大值或最小值 * 根据需要让升序或降序排列 */ public class Select ...

  4. docker运行jar文件

    一.环境 本地虚拟机安装的centos7 二.安装docker yum install docker-engine 三.开启阿里云加速 docker的镜像仓库在国外,下载会很慢,启用阿里云加速. 在/ ...

  5. set nocount on/off的作用,可配合存储过程使用

    当set nocount 为NO的时候,不返回计数(受Transact-SQL语句影响行数) 当set nocount 为OFF时,返回计数(默认返回) 当 SET NOCOUNT 为 ON 时,将不 ...

  6. django signals 信号

    django signals 信号 配置方式 app下的 __init__.py default_app_config="web.apps.WebConfig" #初始化app配置 ...

  7. 04-python3.5-模拟三级菜单-省-县-区域--01

    #!/usr/bin/env python # -*- coding:utf-8 -*- #Author:XZ data = { '北京':{ "昌平":{ "沙河&qu ...

  8. 阿里云服务器ECS的环境部署和安装

    1.进入产品 云服务 ECS 和 云空间选择, 我购买的是ECS,那么环境搭建都是需要自己动手实现的. 2. 选择创建一个实例 记得网络一定要选择 公用网络,主机地址选择选择国内. 3. 购买的时候 ...

  9. 解决ssh连接问题1

    某天服务器A与B,互相ping没问题,telnet 22端口没问题 ssh -v a@10.80.97.241 OpenSSH_6.6.1, OpenSSL 1.0.1k-fips 8 Jan 201 ...

  10. IDEA日常遇到问题汇总

    1. IDEA .gitignore文件不显示在项目栏中 解决方法,setting  >> Editor >> Code Style >> File Type &g ...