zoukankan      html  css  js  c++  java
  • 【变态需求】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

  • 相关阅读:
    Hall定理
    c#汉字转为拼音
    asp.net导出Excel 按照预定格式,以及解决导出乱码
    asp.net导出Excel
    SQL正常工作日上班安排
    SQL做日历
    T-SQL数组循环
    存储过程删除 用于更改,
    数组操作-去除重复和空白元素
    TreeView递归取值
  • 原文地址:https://www.cnblogs.com/lggggg/p/10246102.html
Copyright © 2011-2022 走看看