【变态需求】bootstrapTable列排序-选择正序倒序不排序

这一生的挚爱 提交于 2020-05-02 18:17:55

 产品经理:那个table排序能不能点击后弹个选项选择正序倒序不排序?

-- 那个是bootstrapTable的插件!不支持!改不了!!

 

 

注意:数据上假的,效果看http请求参数进行脑补

这是bootstrap能干的列排序:

 

客户想要的列排序:

 

点击再选择升序、降序、不排序,这种反人性的设计。。。。(bootstrapTable没分成上下俩箭头点击排序也很反人性,想倒序还要点击两次)

 

百度一下,网上并没有这种需求和方案,bootstrapTable也没有哪里可以拦截排序,去自定义创建dom再触发排序的api

所以,从bootstrapTable.js下手吧!

 

先了解下bootstrapTable是如何做列排序的

1、在initHeader函数里进行循环colums的时候通过判断options.sortable和column.sortable进行class标记是否排序字段

 

2、监听th点击事件,调用onSort函数

3、onSort排序事件(获取对应排序字段及排序方式)

 

 

 

 

改造!!!

1、改dom  (可排序列添加一个dropdown)

2、改事件监听(干掉原有的监听,添加新的事件监听)

3、复制一份onSort修改获取排序字段及排序方式的逻辑

4、css配合让dropdown正常显示(不该这么写th,,)

 

 

改造到此结束,至于有什么bug,也很难预料到。不便去深究

其实很不推荐修改bootstrapTable,这种第三方基础的东西很容易在不知情的情况下覆盖掉,

 

 

 

 demo效果:在这里

 github仓库地址:https://github.com/lvgao2012/bootstrap-table

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!