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 排序相关推荐

  1. 【Easyui】Easyui Datagrid 排序

    前端配置方法 方法一,HTML中添加sortable:true属性 <th data-options="field:'AMOUNT_OA',width:60,align:'right' ...

  2. jquery+easyui+datagrid 排序

    直接上图: 效果:

  3. jquery easyui dataGrid动态改变排序字段名

    2019独角兽企业重金招聘Python工程师标准>>> jquery easyui dataGrid 动态改变排序字段名,一般情况下,在使用的时候,我们会点击相应字段进行排序, 这里 ...

  4. easyui datagrid 多列排序,该如何处理[多列同时order,只针对某一列order]

    easyui datagrid 多列排序 不要demo里自带的multisort 那个是在第一列排序的基础上对第二列排序 我只要多列单独排序 每次都只管这一列的顺序 不管原来已排过序的列 可以把原来的 ...

  5. JQuery EasyUI Datagrid 清空排序状态(箭头)代码

    使用DataGrid排序 结果发现一个不小的问题 $('#mydatagrid').datagrid('options').sortName = ""$('#mydatagrid' ...

  6. 反射实体自动生成EasyUi DataGrid模板 第二版--附项目源码

    之前写过一篇文章,地址  http://www.cnblogs.com/Bond/p/3469798.html   大概说了下怎么通过反射来自动生成对应EasyUi datagrid的模板,然后贴了很 ...

  7. EasyUI DataGrid根据字段动态合并单元格

    为什么80%的码农都做不了架构师?>>>    1.合并方法 /** * EasyUI DataGrid根据字段动态合并单元格 * 参数 tableID 要合并table的id * ...

  8. jQuery EasyUI DataGrid - 格式化列(formatter )

    以下实例格式化在 easyui DataGrid 里的列数据,并使用自定义列的 formatter,如果价格小于 20 就将文本变为红色. 为了格式化一个数据网格(DataGrid)列,我们需要设置 ...

  9. easyui datagrid 表头固定(垂直滚动条)、列固定(水平滚动条)

    easyui datagrid 表头固定(垂直滚动条).列固定(水平滚动条),每页显示1000行 最近用多了easyui 之后还是觉得它的功能还是很强大的.它原有的功能就已经能够满足90%以上的界面需 ...

最新文章

  1. 托管代码与非托管代码
  2. 【转载】Deep learning:十九(RBM简单理解)
  3. JavaScript修改css中style,classname,cssText实例
  4. java数据结构至对称矩阵压缩存储
  5. 演示: GTS流量×××和CAR流量监管的效果及相关实践计划
  6. mysql做wp网站_mysql做wp网站
  7. [译] 在远程工作中领悟到的 10 件事
  8. c#窗口操作-句柄操控全解
  9. AcWing 802. 区间和
  10. Ubuntu21.04 查看 GNOME 版本
  11. Git常用命令及场景
  12. c++实现双向链表的常用功能
  13. CANoe——CanTest模块信号测试函数
  14. md5和sha1文件完整性校验
  15. 可视化编程语言_可视化编程语言影响图
  16. 2022年湖南省基金从业资格(证券投资基金基础知识)练习题及答案
  17. C语言实现PID之应用
  18. ZOJ3380- Patchouli's Spell Cards(概率DP+计数)
  19. ssm+vue学生网络作业管理系统java maven
  20. 我总结的经营理念,做人做事都该如此

热门文章

  1. Vue基础(六)——表单
  2. ES学习之term与terms区别
  3. 本地html设置信任站点,Win2003打开网页时总是提示添加网址到信任站点的设置方法...
  4. C++ 删除指定字符串中的某些字符
  5. js比较返回数据msg遇到的问题
  6. Thoughtworks、深信服、顺丰科技、景嘉微、微众银行……纷纷加入CSDN,雇主形象打造已成企业发展重要战略
  7. 物联网布局卡位战:东芝的万物互联梦想
  8. 采购必备资源网址大全(供应链职业经理证书)
  9. 网课之家(wangkezhijia.net)绝无二心为您服务。为了你的突破我们竭尽所能
  10. 消息中间件之JMS规范