产品经理:那个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列排序-选择正序倒序不排序的更多相关文章

  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[]、Integer[]、String[] 排序( 正序、倒叙)、去重

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

  8. [javaSE] 数组(排序-选择排序)

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

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

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

随机推荐

  1. 13、多进程multiprocessing、进程池

    内容相关: multiprocessing: 进程的创建与运行 进程常用相关函数 进程池: 为什么要有进程池 进程池的创建与运行:串行.并行 回调函数 多进程multiprocessing: pyth ...

  2. SQL Server的一个不显眼的功能 备份文件的分割

    SQL Server的一个不显眼的功能 备份文件的分割 当完整备份数据库的时候,我们有时候可能会遇到一种极端情况,比如服务器上C,D,E三个盘符都只剩下5G空间了 但是如果要完整备份业务库需要12G的 ...

  3. is_valid校验机制

    先来归纳一下整个流程 (1)首先is_valid()起手,看seld.errors中是否值,只要有值就是flase(2)接着分析errors.里面判断_errors是都为空,如果为空返回self.fu ...

  4. zookeeper-01 概述

    1. Zookeeper概念简介和应用场景 1.1.  概念简介 Zookeeper是一个分布式协调服务:就是为用户的分布式应用程序提供协调服务 A.zookeeper是为别的分布式程序服务的 B.Z ...

  5. February 6th, 2018 Week 6th Tuesday

    To be is to be perceived. 存在即被感知. How to interpret this quote? Maybe it means that everything in you ...

  6. 17秋 软件工程 团队第五次作业 Alpha Scrum9

    17秋 软件工程 团队第五次作业 Alpha Scrum9 今日完成的任务 世强:APP后端部门申请状态: 港晨:主页面代码实现: 树民:完善超级管理员web后端: 伟航:设置页面和侧边栏的原型: 陈 ...

  7. php数据库单例模式理解

    单例模式(职责模式): 简单的说,一个对象(在学习设计模式之前,需要比较了解面向对象思想)只负责一个特定的任务: 单例类: 1.构造函数需要标记为private(访问控制:防止外部代码使用new操作符 ...

  8. Python 使用 xlwings 往 excel中写入一列数据的两种方法

    1.准备一个二维列表,然后再range后面不指定任何选项,可以输出该二维列表中数据在一列中显示,如下代码: # -*- coding:utf-8 -*- import xlwings as xw li ...

  9. Django之数据表增删改查

    Django数据增删改查: 上课代码 from django.shortcuts import render,HttpResponse # Create your views here. from a ...

  10. 如何在sublime编辑器中,执行命令行脚本

    我有个愿意,在执行命令行时,不打开那个黑乎乎命令行窗口,如果编辑器内置支持就好了. 打开vs code 和 sublime,分别按快捷键 Ctrl + ·(tab键上面那个键),vs code可以提供 ...