【变态需求】bootstrapTable列排序-选择正序倒序不排序
产品经理:那个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
【变态需求】bootstrapTable列排序-选择正序倒序不排序的更多相关文章
- Java:集合,对列表(List)中的自定义对象按属性(字段)排序(正序、倒序)的方法
1. 要求 对列表(List)中的自定义对象,要求能够按照对象的属性(字段)进行排序(正序.倒序). 如:用户对象(Member)有用户名(username).级别(level).出生日期(birth ...
- C#数组的排序(正序逆序)
C#数组的排序(正序逆序) 这种排序 超级简单的 ! using System; using System.Collections.Generic; using System.Linq; using ...
- Java:集合,对列表(List)中的数据(整型、字符串、日期等)进行排序(正序、倒序)的方法;字符串按照整型排序的方法
1. 要求 对List列表中的数据进行排序(正序.倒序),列表中的数据包括:整型(Integer).字符串(String).日期(Date)等.对于字符串,要求允许对它按照整型进行排序. 2. 实现思 ...
- Comparable 接口学习:对对象List进行比较和排序(正序和逆序)
Comparable 接口只有一个 int compareTo(T o) 方法 1.int compareTo(T o) 方法 方法说明: 比较此对象和规定的对象,如果此对象大于,等于,小于规定对象, ...
- java8笔记: sorted()之正序倒序
java8笔记: sorted()之正序倒序 这篇文章将会讲解Java 8 Stream sorted()示例 下面代码以自然序排序一个list List<Person> listTem ...
- Java之选择排序(正序、逆序)
public class SelectSort { public static void main(String[] args) { /** * @author JadeXu * @// TODO: ...
- 【java基础学习一】int[]、Integer[]、String[] 排序( 正序、倒叙)、去重
调用: //重复项有9.5.1.2 int[] ints = new int[]{9,4,7,8,2,5,1,6,2,5,9,1}; arrayIntTest(ints); ///////////// ...
- [javaSE] 数组(排序-选择排序)
两层嵌套循环,外层循环控制次数,内层循环进行比较 for(int x=0;x<arr.length;x++){ for(int y=0;y<arr.length;y++){ if(arr[ ...
- 数据结构:堆排序 (python版) 小顶堆实现从大到小排序 | 大顶堆实现从小到大排序
#!/usr/bin/env python # -*- coding:utf-8 -*- ''' Author: Minion-Xu 小堆序实现从大到小排序,大堆序实现从小到大排序 重点的地方:小堆序 ...
随机推荐
- 13、多进程multiprocessing、进程池
内容相关: multiprocessing: 进程的创建与运行 进程常用相关函数 进程池: 为什么要有进程池 进程池的创建与运行:串行.并行 回调函数 多进程multiprocessing: pyth ...
- SQL Server的一个不显眼的功能 备份文件的分割
SQL Server的一个不显眼的功能 备份文件的分割 当完整备份数据库的时候,我们有时候可能会遇到一种极端情况,比如服务器上C,D,E三个盘符都只剩下5G空间了 但是如果要完整备份业务库需要12G的 ...
- is_valid校验机制
先来归纳一下整个流程 (1)首先is_valid()起手,看seld.errors中是否值,只要有值就是flase(2)接着分析errors.里面判断_errors是都为空,如果为空返回self.fu ...
- zookeeper-01 概述
1. Zookeeper概念简介和应用场景 1.1. 概念简介 Zookeeper是一个分布式协调服务:就是为用户的分布式应用程序提供协调服务 A.zookeeper是为别的分布式程序服务的 B.Z ...
- February 6th, 2018 Week 6th Tuesday
To be is to be perceived. 存在即被感知. How to interpret this quote? Maybe it means that everything in you ...
- 17秋 软件工程 团队第五次作业 Alpha Scrum9
17秋 软件工程 团队第五次作业 Alpha Scrum9 今日完成的任务 世强:APP后端部门申请状态: 港晨:主页面代码实现: 树民:完善超级管理员web后端: 伟航:设置页面和侧边栏的原型: 陈 ...
- php数据库单例模式理解
单例模式(职责模式): 简单的说,一个对象(在学习设计模式之前,需要比较了解面向对象思想)只负责一个特定的任务: 单例类: 1.构造函数需要标记为private(访问控制:防止外部代码使用new操作符 ...
- Python 使用 xlwings 往 excel中写入一列数据的两种方法
1.准备一个二维列表,然后再range后面不指定任何选项,可以输出该二维列表中数据在一列中显示,如下代码: # -*- coding:utf-8 -*- import xlwings as xw li ...
- Django之数据表增删改查
Django数据增删改查: 上课代码 from django.shortcuts import render,HttpResponse # Create your views here. from a ...
- 如何在sublime编辑器中,执行命令行脚本
我有个愿意,在执行命令行时,不打开那个黑乎乎命令行窗口,如果编辑器内置支持就好了. 打开vs code 和 sublime,分别按快捷键 Ctrl + ·(tab键上面那个键),vs code可以提供 ...