【變態需求】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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM