EasyUI datagrid 排序
sortName、sortOrder
通过在datagrid中添加sortName可以控制排序的列,sortOrder控制默认排序。多个排序列使用“,”隔开即可
$("xx").datagrid({ sortName:'name1,name2', sortOrder:'asc,desc' })
multiSort
multiSort在文档中使用描述为”定义是否允许多列排序“。但是使用中才发现,添加multiSort后会强调排序顺序
$("xx").datagrid({ sortName:'name1,name2', sortOrder:'asc,desc', multiSort:true })
该排序会在name1排序的基础上对name2排序。如果不使用multiSort,那么name1,name2列的排序是互相独立的。
remoteSort
这里不得不提的一个属性还有remoteSort,文档描述为“定义从服务器对数据进行排序”。也就是说,如果定义了remoteSort:false,那么数据会在浏览器中对数据进行排序,并不会去服务器重新取排序好的数据。如果存在数据分页的情况,一定要设置remoteSort:true。除非把所有的数据都返回到了浏览器端,可以直接在浏览器端进行排序。
sortable、order
这两个属性为columns属性,sortable设置为true,标识该列支持排序,order为默认排序状态。如果只设置column排序属性不设置sortName、sortOrder,第一次刷新页面,默认是初始状态如图:
columns:[[ {field:'sort1',title:'全国排名',rowspan:2,width:80,sortable:true,order:'asc'}, {field:'sort1',title:'全省排名',rowspan:2,width:80,sortable:true,order:'desc'}, ]]
点击后进入sortOrder设置的状态。例如第一次点击全省排名列,会进入设置的desc状态。第二次点击后,会切换状态至asc。
同样第一次点击全国排名时,也会进入设置的asc状态,之后点击会不断的切换状态。
需要注意的是,如果只设置columns排序属性,多个排序列之间是独立的。
sorter
sorter也为columns属性,用于对返回至浏览器的数据,进行自定义排序。有兴趣可以自己尝试
onBeforeSortColumn、 onSortColumn
两个方法的区别在于,onSortColumn在用户排序一列时触发,而onBeforeSortColumn在排序列之前触发,返回false都可以取消排序。入参为sort、order。
需要注意的是:如果使用datagrid的sortName、sortOrder属性设置排序多个排序列,sort、order都会返回所有的列的当前排序状态。
总结
如果需要设置默认排序状态,可以使用datagrid的sortName、sortOrder属性设置默认,如果多个列之间有依赖顺序关系,可以开启multiSort,如果多个列之间没有关系,且独立,不想更改都判断多个属性的状态,建议使用columns属性的sortable、order。
EasyUI datagrid 排序相关推荐
- 【Easyui】Easyui Datagrid 排序
前端配置方法 方法一,HTML中添加sortable:true属性 <th data-options="field:'AMOUNT_OA',width:60,align:'right' ...
- jquery+easyui+datagrid 排序
直接上图: 效果:
- jquery easyui dataGrid动态改变排序字段名
2019独角兽企业重金招聘Python工程师标准>>> jquery easyui dataGrid 动态改变排序字段名,一般情况下,在使用的时候,我们会点击相应字段进行排序, 这里 ...
- easyui datagrid 多列排序,该如何处理[多列同时order,只针对某一列order]
easyui datagrid 多列排序 不要demo里自带的multisort 那个是在第一列排序的基础上对第二列排序 我只要多列单独排序 每次都只管这一列的顺序 不管原来已排过序的列 可以把原来的 ...
- JQuery EasyUI Datagrid 清空排序状态(箭头)代码
使用DataGrid排序 结果发现一个不小的问题 $('#mydatagrid').datagrid('options').sortName = ""$('#mydatagrid' ...
- 反射实体自动生成EasyUi DataGrid模板 第二版--附项目源码
之前写过一篇文章,地址 http://www.cnblogs.com/Bond/p/3469798.html 大概说了下怎么通过反射来自动生成对应EasyUi datagrid的模板,然后贴了很 ...
- EasyUI DataGrid根据字段动态合并单元格
为什么80%的码农都做不了架构师?>>> 1.合并方法 /** * EasyUI DataGrid根据字段动态合并单元格 * 参数 tableID 要合并table的id * ...
- jQuery EasyUI DataGrid - 格式化列(formatter )
以下实例格式化在 easyui DataGrid 里的列数据,并使用自定义列的 formatter,如果价格小于 20 就将文本变为红色. 为了格式化一个数据网格(DataGrid)列,我们需要设置 ...
- easyui datagrid 表头固定(垂直滚动条)、列固定(水平滚动条)
easyui datagrid 表头固定(垂直滚动条).列固定(水平滚动条),每页显示1000行 最近用多了easyui 之后还是觉得它的功能还是很强大的.它原有的功能就已经能够满足90%以上的界面需 ...
最新文章
- 托管代码与非托管代码
- 【转载】Deep learning:十九(RBM简单理解)
- JavaScript修改css中style,classname,cssText实例
- java数据结构至对称矩阵压缩存储
- 演示: GTS流量×××和CAR流量监管的效果及相关实践计划
- mysql做wp网站_mysql做wp网站
- [译] 在远程工作中领悟到的 10 件事
- c#窗口操作-句柄操控全解
- AcWing 802. 区间和
- Ubuntu21.04 查看 GNOME 版本
- Git常用命令及场景
- c++实现双向链表的常用功能
- CANoe——CanTest模块信号测试函数
- md5和sha1文件完整性校验
- 可视化编程语言_可视化编程语言影响图
- 2022年湖南省基金从业资格(证券投资基金基础知识)练习题及答案
- C语言实现PID之应用
- ZOJ3380- Patchouli's Spell Cards(概率DP+计数)
- ssm+vue学生网络作业管理系统java maven
- 我总结的经营理念,做人做事都该如此
热门文章
- Vue基础(六)——表单
- ES学习之term与terms区别
- 本地html设置信任站点,Win2003打开网页时总是提示添加网址到信任站点的设置方法...
- C++ 删除指定字符串中的某些字符
- js比较返回数据msg遇到的问题
- Thoughtworks、深信服、顺丰科技、景嘉微、微众银行……纷纷加入CSDN,雇主形象打造已成企业发展重要战略
- 物联网布局卡位战:东芝的万物互联梦想
- 采购必备资源网址大全(供应链职业经理证书)
- 网课之家(wangkezhijia.net)绝无二心为您服务。为了你的突破我们竭尽所能
- 消息中间件之JMS规范