产品经理:那个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. (网页)JS实现alert中显示换行的方法

    转自脚本之家: 这篇文章主要介绍了JS实现alert中显示换行的方法,实例分析了两种实现alert换行的实现技巧,非常简单实用,需要的朋友可以参考下 本文实例讲述了JS实现alert中显示换行的方法. ...

  2. 兼容多种模块规范(AMD,CMD,Node)的代码

    在JavaScript模块化开发中,为了让同一个模块可以运行在前后端,以及兼容多种模块规范(AMD,CMD,Node),类库开发者需要将类库代码包装在一个闭包内. AMD规范 AMD,即“异步模块定义 ...

  3. JavaScript大杂烩11 - 理解事件驱动

    前面我们回顾了前端JavaScript只干的两件事:操作BOM与操作DOM,那么什么时候去干这些事呢?答案是需要干的时候去干.那么什么时候是需要干的时候呢?答案是事件被触发的时候.这就是通常所说的“事 ...

  4. 设计模式--Proxy

    转自:http://blog.csdn.net/dan_xp/article/details/1820852 最近一直在看java的设计模式 ,感觉印象最深刻的就是"面向接口编程" ...

  5. dell R740在安装完Esxi6.0U3之后出现存储器警告

    最近公司新增3台戴尔R740服务器,这边分别分配内网地址0.16,0.17,0.18三个IP 然后第一天查询了ESxi6.0版本要U3A10这个版本的vmware才能兼容R740服务器 然后安装完0. ...

  6. Win10更换电脑,又不想重装系统的解决方法

    问题描述: 在公司因为两年前用的i3的电脑很卡,然后想换i5的电脑,但是又不想重装系统,因为安装的东西太多了,重装很麻烦 Windows to go介绍: Windows To Go是Windows ...

  7. Django之Template

    模板层(template) 概念:  模板与html的区别:  模板=html+模板语法 模板语法: 1 变量:       {{}}    深度查询: 通过句点符.    列表,字典    clas ...

  8. 深入浅出RxJava(二:操作符)

    看完这篇blog,我相信你肯定想立即在你的项目中使用RxJava了,这篇blog将介绍许多RxJava中的操作符,RxJava的强大性就来自于它所定义的操作符. 首先先看一个例子: 准备工作 假设我有 ...

  9. ng-cordova和cordova区别

    1.cordova介绍    Cordova提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头.麦克风等.    Cordova支持如下7种移动 ...

  10. sh脚本文件的运行

    sh脚本文件的运行mac终端下运行shell脚本 1.写好自己的 脚本,比如test-bash.sh 2.打开终端 执行,方法一: 输入命令 ./test-bash.sh , 方法二:直接把 aa.s ...