Easyui datagrid自定义排序
做项目遇到个关于排序问题,想着在前端排序,正好Easyui有这个功能,所以就拿来用了一下,因为跟官网的Demo不太一样,所以总结一下;
首先这一列是要排序的列(当然,在生产环境,这一列是隐藏的,在开发阶段,我没有隐藏而已),不用多说可定是CEO排在最上面,Leader排在中间,Employee排后面,默认的顺序是这样的;
然后我在该列加一个配置
就是 sortable:true 的配置,这个配置告诉datagrid表示这类是可以排序的,同时在这列的表头多了一个排序按钮,就像这样
当出现这个箭头的时候;你可以点击一下,然后就可以排序了,但这并不是最终的目的,我们的目地是一开始就要排序好,而不是手动再去点点;
于是在datafrid中配置
onSortColumn方法;该方法,就是排序的方法
onSortColumn: function (sort, order) { alert("sort:"+sort+",order:"+order+""); }
,当你添加过该方法后,你再去点击,那个排序按钮,就会出现
第一个值是排序的字段,第二个值是排序的顺序 倒叙 ,或者降序;
有了这个之后 ,在datafrid中配置
sortName:'position',
sortOrder:'desc',
sortName就是你要排序的字段名;
sortOrder就是排序的数序;
好的,上面的都配置好了之后就要开始写自定义排序函数了,如下
{
title: '员工编号',
field: 'id',
align: "center",
width: '14%' },{
title:'是否是领导',
field:'position',
// hidden:true,
align: "center",
width: '10%',
sortable:true,
sorter:function (a,b) {
return (a.length<b.length?1:-1); }
请注意sorter方法,这个方法有两个参数,接下来就对这个参数就行判断吧,我这里使用长度来判断的,短的排在上面,你们可以根据自己实际需求进行排序,再次刷新页面,直接就是排序好的表格了
最后,需要做的就是将这一列隐藏就好了(当然根据个人需要!)
重点要说一下的就是,建议首先写sorter方法,这里定义了你排序的条件,有了这个条件之后,再去定义排序的规则(正/逆),就可以了!
Easyui datagrid自定义排序的更多相关文章
- 完美实现保存和加载easyui datagrid自定义调整列宽位置隐藏属性功能
需求&场景 例表查询是业务系统中使用最多也是最基础功能,但也是调整最平凡,不同的用户对数据的要求也不一样,所以在系统正式使用后,做为开发恨不得坐在业务边上,根据他们的要求进行调整,需要调整最多 ...
- EasyUI Datagrid 自定义列、Foolter及单元格编辑
1:自定义列,包括 Group var head1Array = []; head1Array.push({ field: 'Id', title: 'xxxx', rowspan: 2 }); he ...
- easyui datagrid自定义操作列
通过formatter方法给Jquery easyui 的datagrid 每行增加操作链接 我们都知道Jquery的EasyUI的datagrid可以添加并且自定义Toolbar, 这样我们选择一行 ...
- easyui datagrid自定义按钮列,即最后面的操作列(转)
做项目的时候因为需求,要在表格的最后添加一列操作列,easyUI貌似没有提供这种功能,不过没关系,我们可以自定义来实现 版本:jQuery easyUI 1.3.2 这里我的实现方式是采用HTML形式 ...
- EasyUI DataGrid 添加排序
这个事例演示了如何在点击列头的时候排序DataGrid中全部的列可以通过点击列头被排序.你可以定义可以被排序的列.默认的,列不能被排序除非你设置sortable属性为TRUE,下面是例子:标记 < ...
- EasyUI - DataGrid 组建 - [ 排序功能 ]
效果: 红框的字段看,为设置了,列排序,向后台Post数据sort/order. 原理:向后台POST数据,sort/post数据. html代码: <table id="tab&qu ...
- easyui datagrid自定义按钮列,即最后面的操作列
在很多时候我们要在表格的最后添加一列操作列,easyUI貌似没有提供种功能,不过没关系,我们可以自定义来实现首先是HTML部分 <table id="tt" class=&q ...
- easyui datagrid 列排序
1.js设置 //=====================数据加载===================== /** * grid加载数据 * * @returns */ function grid ...
- easyui datagrid 自定义单元格单击与双击事件(Day_38)
$(function(){ $('#tableId').datagrid({//单击事件 onClickRow:function(rowIndex,rowData){ alert("单 ...
随机推荐
- springcloud---2
每一个都是独立的springboot工程.通过自己的ip和端口访问. Eureka是服务发现组件,Eureka里面有一个服务注册表,存的是服务消费者和服务生产者的ip和端口.Eureka集群里面每个E ...
- C++、Java、JavaScript中的正则表达式
C++(VS2013编译器):http://msdn.microsoft.com/zh-cn/library/bb982727.aspx#grammarsummary Java: ...
- Swap交换分区--continue
Linux内核为了提高读写效率与速度,会将文件在内存中进行缓存,这部分内存就是Cache Memory(缓存内存).即使你的程序运行结束后,Cache Memory也不会自动释放.这就会导致你在Lin ...
- servlet的总结
tomcat在启动的时候 加载webapp下面的web.xml,加载里面定义的servlet. web.xml文件有两部分:servlet类定义和servlet映射定义每个被载入的servlet类都有 ...
- std::tuple作为参数invoke调用函数
template<typename Function, typename Tuple, std::size_t... Index> decltype(auto) invoke_impl(F ...
- 20135302魏静静——linux课程第六周实验及总结
linux课程第六周实验及总结 实验及学习总结 1.进程描述符task_struct数据结构 进程的作用: 将信号.进程间通信.内存管理和文件系统联系起来 操作系统的三大功能: 进程管理.内存管理.文 ...
- params
using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Ch06 ...
- 前端初级技能No.1 [切图]
“切图”是指通过测量设计稿,从设计稿中提取图片等方式为页面开发提供支持的过程. 整个“切图”过程主要分为以下五个主要步骤: 分析设计图: 测量元素: 提取图片: 保存图片: 图片优化与合并: 1.分析 ...
- mysql5.7.22安装步骤
在官网上下载mysql的压缩包,然后解压 (下载地址:https://dev.mysql.com/downloads/mysql/) 1.打开cmd,建议使用管理员的身份打开cmd,如果不用使用管理员 ...
- AccessToken-->Password Grant
https://www.oauth.com/oauth2-servers/access-tokens/password-grant/ The Password grant is used when t ...