做项目遇到个关于排序问题,想着在前端排序,正好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自定义排序的更多相关文章

  1. 完美实现保存和加载easyui datagrid自定义调整列宽位置隐藏属性功能

    需求&场景 例表查询是业务系统中使用最多也是最基础功能,但也是调整最平凡,不同的用户对数据的要求也不一样,所以在系统正式使用后,做为开发恨不得坐在业务边上,根据他们的要求进行调整,需要调整最多 ...

  2. EasyUI Datagrid 自定义列、Foolter及单元格编辑

    1:自定义列,包括 Group var head1Array = []; head1Array.push({ field: 'Id', title: 'xxxx', rowspan: 2 }); he ...

  3. easyui datagrid自定义操作列

    通过formatter方法给Jquery easyui 的datagrid 每行增加操作链接 我们都知道Jquery的EasyUI的datagrid可以添加并且自定义Toolbar, 这样我们选择一行 ...

  4. easyui datagrid自定义按钮列,即最后面的操作列(转)

    做项目的时候因为需求,要在表格的最后添加一列操作列,easyUI貌似没有提供这种功能,不过没关系,我们可以自定义来实现 版本:jQuery easyUI 1.3.2 这里我的实现方式是采用HTML形式 ...

  5. EasyUI DataGrid 添加排序

    这个事例演示了如何在点击列头的时候排序DataGrid中全部的列可以通过点击列头被排序.你可以定义可以被排序的列.默认的,列不能被排序除非你设置sortable属性为TRUE,下面是例子:标记 < ...

  6. EasyUI - DataGrid 组建 - [ 排序功能 ]

    效果: 红框的字段看,为设置了,列排序,向后台Post数据sort/order. 原理:向后台POST数据,sort/post数据. html代码: <table id="tab&qu ...

  7. easyui datagrid自定义按钮列,即最后面的操作列

    在很多时候我们要在表格的最后添加一列操作列,easyUI貌似没有提供种功能,不过没关系,我们可以自定义来实现首先是HTML部分 <table id="tt" class=&q ...

  8. easyui datagrid 列排序

    1.js设置 //=====================数据加载===================== /** * grid加载数据 * * @returns */ function grid ...

  9. easyui datagrid 自定义单元格单击与双击事件(Day_38)

    $(function(){ $('#tableId').datagrid({//单击事件   onClickRow:function(rowIndex,rowData){  alert("单 ...

随机推荐

  1. Hibernate与autoCommit

    JDBC 的autoCommit属性 对于每一个 JDBC connection,都有一个autoCommit属性,只有执行commit后,该connection中的操作(statement操作)才会 ...

  2. Python 实例3—三级菜单

    老男孩培训学习: ''' Author:Ranxf ''' menu = { '北京': { '海淀': { '五道口': { 'soho': {}, '网易': {}, 'google': {} } ...

  3. WCF可靠性会话之服务分流

    可靠性绘画答条件: (1)服务绑定支持可靠性绘画:特别是netTcpBinding.wsHttpBinding及wsDualHttpBinding. wsDualHtttpBinding可靠性绘画始终 ...

  4. SVN 的用法

    1.   SVN的服务端配置 接下来  我们要创建一个根目录(就是用于存诸工厂的),用来存诸SVN的工厂信息(每一个工厂等于一个项目)创建地址为:   d:/svn/ root(即在这里创建一个roo ...

  5. 手写一款符合Promise/A+规范的Promise

    手写一款符合Promise/A+规范的Promise 长篇预警!有点长,可以选择性观看.如果对Promise源码不是很清楚,还是推荐从头看,相信你认真从头看到尾,并且去实际操作了,肯定会有收获的.主要 ...

  6. 20145216 史婧瑶《Java程序设计》第6周学习总结

    20145216 <Java程序设计>第6周学习总结 教材学习内容总结 第十章 输入/输出 10.1 InputStream与OutputStream 如果要将数据从来源中取出,可以使用输 ...

  7. 20145327 《Java程序设计》第八周学习总结

    20145327 <Java程序设计>第八周学习总结 教材学习内容总结 NIO使用频道(channel)来衔接数据节点,在处理数据时,NIO可以让你设定缓冲区(Buffer)容量,在缓冲区 ...

  8. 20145328 《Java程序设计》实验二实验报告

    20145328 <Java程序设计>实验二实验报告 实验名称 Java面向对象程序设计 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 ...

  9. 20145211《网络渗透》Adobe阅读器渗透攻击

    20145211<网络渗透>Adobe阅读器渗透攻击 实验准备 1.用了一个kali,一个English Winxp3,并保证能相互ping通 2.开启显示隐藏文件 实验步骤: 1.开启m ...

  10. Visual Studio 2010生成解决方案时,导致C盘空间越来越小

    为了从根本上解决问题,还是去掉智能跟踪选项吧,方案: VS2010-->工具-->选项-->IntelliTrance-->将“启用IntelliTrace”勾选去掉--> ...