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("单 ...
随机推荐
- playbook管理配置文件
前言:在生产环境中,经常需要更改多台机器配置文件,所以用playbook来实现nginx配置文件的管理 一.更新nginx配置文件并重新加载 1. 创建对应目录结构 mkdir -p /etc/ans ...
- java 2017/6/26杂记
mkdirs()可以建立多级文件夹, mkdir()只会建立一级的文件夹, 如下: new File("/tmp/one/two/three").mkdirs(); 执行后, 会建 ...
- Cisco 交换Trunk配置
交换Trunk配置 #进入直连端口下 config)#int f0/1 #配置trunk封装协议 config)#switchport trunk encapsulation dot1q #配置为tr ...
- 如何用纯 CSS 创作单元素点阵 loader
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览.https://codepen.io/comehope/pen/YvBvBr 可交互视频 此 ...
- 20145329 《JAVA程序设计》实验三总结
实验日期:2016.4.12 实验时间:15:30~17:30 实验序号:实验三 实验名称: 敏捷开发与XP实践 实验目的与要求: XP基础 XP核心实践 相关工具 实验内容 1.使用git托管代码 ...
- swift设计模式学习 - 装饰模式
移动端访问不佳,请访问我的个人博客 设计模式学习的demo地址,欢迎大家学习交流 装饰模式 在不必改变原类文件和使用继承的情况下,动态地扩展一个对象的功能.它是通过创建一个包装对象,也就是装饰来包裹真 ...
- C# Programming Guide-->Statements, Expressions, and Operators-->Anonymous Functions
C# Programming Guide Anonymous Functions Lambda Expressions Anonymous Methods In versions of C# befo ...
- Nodejs V8引擎 fast property lookup
前言 之所以会研究这个东西,是我在网上找了一下各个语言的执行效率比较.好吧,我承认这是个无聊的东西,不过看看总是无妨,然而我惊讶的发现,有些测试声称Java,C,Nodejs是处在同一个效率级别参见链 ...
- Python学习札记(十三) Function3 函数参数二
参考:函数参数 Note A.关键字参数: 1.关键字参数:**kw 可变参数允许你传入0个或任意个参数,这些可变参数在函数调用时自动组装为一个tuple.而关键字参数允许你传入0个或任意个含参数名的 ...
- Centos7 安装Power Shell
Centos7 安装Power Shell 1 查看版本 # cat /etc/redhat-release CentOS Linux release 7.5.1804 (Core) 2 安装 # R ...