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

时间:2022-03-13 07:51:19

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

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

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

这是bootstrap能干的列排序:

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

客户想要的列排序:

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

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

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

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

所以,从bootstrapTable.js下手吧!

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

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

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

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

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

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

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

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

改造!!!

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

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

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

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

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

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

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

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

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

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

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

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

demo效果:在这里

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

【变态需求】bootstrapTable列排序-选择正序倒序不排序的更多相关文章

  1. Java:集合,对列表(List)中的自定义对象按属性(字段)排序(正序、倒序)的方法

    1. 要求 对列表(List)中的自定义对象,要求能够按照对象的属性(字段)进行排序(正序.倒序). 如:用户对象(Member)有用户名(username).级别(level).出生日期(birth ...

  2. C#数组的排序(正序逆序)

    C#数组的排序(正序逆序) 这种排序 超级简单的 ! using System; using System.Collections.Generic; using System.Linq; using ...

  3. Java:集合,对列表(List)中的数据(整型、字符串、日期等)进行排序(正序、倒序)的方法;字符串按照整型排序的方法

    1. 要求 对List列表中的数据进行排序(正序.倒序),列表中的数据包括:整型(Integer).字符串(String).日期(Date)等.对于字符串,要求允许对它按照整型进行排序. 2. 实现思 ...

  4. Comparable 接口学习:对对象List进行比较和排序(正序和逆序)

    Comparable 接口只有一个 int compareTo(T o) 方法 1.int compareTo(T o) 方法 方法说明: 比较此对象和规定的对象,如果此对象大于,等于,小于规定对象, ...

  5. java8笔记: sorted()之正序倒序

    java8笔记: sorted()之正序倒序 这篇文章将会讲解Java 8 Stream sorted()示例 下面代码以自然序排序一个list List<Person> listTem ...

  6. Java之选择排序(正序、逆序)

    public class SelectSort { public static void main(String[] args) { /** * @author JadeXu * @// TODO: ...

  7. 【java基础学习一】int&lbrack;&rsqb;、Integer&lbrack;&rsqb;、String&lbrack;&rsqb; 排序( 正序、倒叙)、去重

    调用: //重复项有9.5.1.2 int[] ints = new int[]{9,4,7,8,2,5,1,6,2,5,9,1}; arrayIntTest(ints); ///////////// ...

  8. &lbrack;javaSE&rsqb; 数组(排序-选择排序)

    两层嵌套循环,外层循环控制次数,内层循环进行比较 for(int x=0;x<arr.length;x++){ for(int y=0;y<arr.length;y++){ if(arr[ ...

  9. 数据结构:堆排序 (python版) 小顶堆实现从大到小排序 &vert; 大顶堆实现从小到大排序

    #!/usr/bin/env python # -*- coding:utf-8 -*- ''' Author: Minion-Xu 小堆序实现从大到小排序,大堆序实现从小到大排序 重点的地方:小堆序 ...

随机推荐

  1. Vue组件之自定义表单组件

    今天又看了一遍vue的文档,记得之前学习的时候,官方文档中有提过,v-model指令是一个语法糖,做两件事,一个是给表单控件元素绑定value,第二个是当输入时更新绑定的值,不过后来在"表单 ...

  2. iOS10 UI教程视图的生命周期

    iOS10 UI教程视图的生命周期 说到视图的生命周期一般都是指视图控制器的视图生命周期.在视图的声明周期中最主要的有8个方法,分别为loadView().viewDidLoad().viewWill ...

  3. POJ 1173 Find them&comma; Catch them

    题意:有两个帮派,每个人只属于一个帮派,m次操作,一种操作告诉你两个人不是一个帮派的,另一种操作问两个人是不是在一个帮派. 解法:并查集+向量偏移.偏移量表示和根节点是不是同一帮派,是为0,不是为1. ...

  4. linux 优化(一)

    uptime up 表示系统正在运行 10:54:19 表示当前时间 8 min 表示系统启动的总时间 1 user 表示正在登陆用户数 load average 表示系统平均负载,最后三个数字呢,依 ...

  5. &lbrack;原创&rsqb;SOAPUI工具介绍

    [原创]SOAPUI工具介绍 一 官方网站:http://www.soapui.org/二 下载地址:http://sourceforge.net/projects/soapui/files/三 so ...

  6. 咏南中间件开始支持redis client接口调用

    咏南中间件开始支持redis client接口调用 咏南中间件封装了redis client接口,可以支持REDIS了. 如下图,将数据集写入REDIS缓存,和从REDIS缓存获取数据: proced ...

  7. C&num;--串行化与反串行化

    串行化是指存储和获取磁盘文件.内存或其他地方中的对象.在串行化时,所有的实例数据都保存到存储介质上,在取消串行化时,对象会被还原,且不能与其原实例区别开来.只需给类添加Serializable属性,就 ...

  8. IDEA Run&sol;Debug Configurations 中点击&OpenCurlyDoubleQuote;&plus;”号没有tomcat server选项

    环境: 版本:IntelliJ IDEA 2016.3.2系统:windows7 32位 / ubuntu上通用 2.问题: 在IDEA中,对每一个web项目都要配置tomcat服务器,如果你是第一次 ...

  9. C&num; winform DataGridView 常见属性

    C# winform DataGridView 属性说明① 取得或者修改当前单元格的内容 ② 设定单元格只读 ③ 不显示最下面的新行 ④ 判断新增行 ⑤ 行的用户删除操作的自定义 ⑥ 行.列的隐藏和删 ...

  10. C&plus;&plus;继承与组合的区别

    C++程序开发中,设计孤立的类比较容易,设计相互关联的类却比较难,这其中会涉及到两个概念,一个是继承(Inheritance),一个是组合(Composition).因为二者有一定的相似性,往往令程序 ...