【變態需求】bootstrapTable列排序-選擇正序倒序不排序

 產品經理：那個table排序能不能點擊後彈個選項選擇正序倒序不排序？

-- 那個是bootstrapTable的插件！不支持！改不了！！

 

 

注意：數據上假的，效果看http請求參數進行腦補

這是bootstrap能幹的列排序：

 

客戶想要的列排序：

 

點擊再選擇升序、降序、不排序，這種反人性的設計。。。。（bootstrapTable沒分紅上下倆箭頭點擊排序也很反人性，想倒序還要點擊兩次）

 

百度一下，網上並無這種需求和方案，bootstrapTable也沒有哪裏能夠攔截排序，去自定義建立dom再觸發排序的api

因此，從bootstrapTable.js下手吧！

 

先了解下bootstrapTable是如何作列排序的

一、在initHeader函數裏進行循環colums的時候經過判斷options.sortable和column.sortable進行class標記是否排序字段

 

二、監聽th點擊事件，調用onSort函數

三、onSort排序事件（獲取對應排序字段及排序方式）

 

 

 

 

改造！！！

一、改dom  （可排序列添加一個dropdown）

二、改事件監聽（幹掉原有的監聽，添加新的事件監聽）

三、複製一份onSort修改獲取排序字段及排序方式的邏輯

四、css配合讓dropdown正常顯示（不應這麼寫th，，）

 

 

改造到此結束，至於有什麼bug，也很難預料到。不便去深究

其實很不推薦修改bootstrapTable，這種第三方基礎的東西很容易在不知情的狀況下覆蓋掉，

 

 

 

 demo效果：在這裏

 github倉庫地址：https://github.com/lvgao2012/bootstrap-table