【变态需求】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 小堆序实现从大到小排序,大堆序实现从小到大排序 重点的地方:小堆序 ...
随机推荐
- 利用奇异值分解(SVD)进行图像压缩-python实现
首先要声明,图片的算法有很多,如JPEG算法,SVD对图片的压缩可能并不是最佳选择,这里主要说明SVD可以降维 相对于PAC(主成分分析),SVD(奇异值分解)对数据的列和行都进行了降维,左奇异矩阵可 ...
- MIME 内容类型
MIME内容类型 https://www.iana.org/assignments/media-types/media-types.xhtml 媒体在各浏览器的支持情况: https://develo ...
- NFS常见问题
问题一:取消挂载失败 问题现象: umount /opt/data umount.nfs: /opt/data: device is busy umount.nfs: /opt/data: devic ...
- 解决eclipse启动慢
每次启动eclipse时都要等待半分钟左右,对于追求效率的程序员来说,等待每一秒都是一种折磨,出于高效开发的精神,这个问题必须解决掉.方案如下: ①在工具栏中的help中找到about eclipse ...
- Spring boot+ maven + thymeleaf + HTML 实现简单的web项目
第一步: 创建一个SpringBoot应用 第二步: 创建一个实体,用来存储数据,在src/main/java/com/example/first下创建包entity , 在entity下创建Pers ...
- 静态库lib调试
1.首先生成lib文件的解决方案编译通过. 2.将最新的lib和头文件在需要调用的exe中,替换掉. 3.复制需要调试的cpp文件到exe解决方案下,并添加现有项. 4.运行无错误后,添加断点即可调试 ...
- 阿里八八β阶段Scrum(5/5)
今日进度 陈裕鹏: 简单信息抽取编码完成 叶文滔: 处理了信息抽取编码的一些BUG,修复了日程界面不会自动更新添加的日程的BUG,修改了原先测试用的TAG以及数据分析部分数据计算数值错误的问题 王国超 ...
- sql 查询重复行数据
1.查找表中多余的重复记录,重复记录是根据单个字段(peopleId)来判断select * from peoplewhere peopleId in (select peopleId from ...
- 控件_SeekBar与RatingBar
这两种进度条都是ProgressBar的子类 SeekBar:是一种可以拖动的进度条,比如播放音乐的进度 import android.app.Activity; import android.os. ...
- [TJOI2010]分金币
嘟嘟嘟 看数据范围,就能想到折半搜索. 但怎么搜,必须得想清楚了. 假设金币总数为1000,有20个人,首先搜前10个人,把答案记下来.然后如果在后十个人中搜到了4个人,价值为120,那么我们应该在记 ...