博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【变态需求】bootstrapTable列排序-选择正序倒序不排序
阅读量:5890 次
发布时间:2019-06-19

本文共 709 字,大约阅读时间需要 2 分钟。

产品经理:那个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://juejin.im/post/5c369fb36fb9a049e06387ec

你可能感兴趣的文章
C++中的堆,栈,静态内存区,常量区
查看>>
动态SQL实现与注意事项(有返回值与无返回值动态SQL 实现)
查看>>
java struts2 debug
查看>>
Android图片圆角效果
查看>>
WeChat Official Account Admin Platform API Introduction
查看>>
C语言写单链表的创建、释放、追加(即总是在最后的位置增加节点)
查看>>
C# LINQ详解(一)
查看>>
视频直播点播nginx-rtmp开发手册中文版
查看>>
ruby学习总结04
查看>>
Binary Tree Paths
查看>>
Ueditor自定义ftp上传
查看>>
线程以及多线程
查看>>
PHP队列的实现
查看>>
单点登录加验证码例子
查看>>
[T-SQL]从变量与数据类型说起
查看>>
occActiveX - ActiveX with OpenCASCADE
查看>>
iOS8中定位服务的变化(CLLocationManager协议方法不响应,无法回掉GPS方法,不出现获取权限提示)...
查看>>
BeanUtils\DBUtils
查看>>
VC 创建托盘,托盘tooltip。右键托盘菜单,点击别的地方会隐藏掉的问题。
查看>>
第一天,新的定义
查看>>