前端外掛之Bootstrap Dual Listbox使用

運維咖啡吧發表於2019-07-23
前端boot

工欲善其事，必先利其器

對於很多非專業前端開發來說寫頁面是非常痛苦的，藉助框架或外掛往往能夠達到事半功倍的效果，本系列文章會介紹我在運維繫統開發過程中用到的那些順手的前端外掛，如果你是想寫XX管理系統的學生、或是需要獨自做Dashboard的後端工程師、亦或是像我這樣半吊子的開發加運維，那麼這個系列的文章你一定不要錯過

Bootstrap Dual Listbox是一款基於Bootstrap的雙向select選擇框控制元件，作為對multiple select的擴充套件，使用起來非常簡單，功能也更強大

專案Github地址：https://github.com/istvan-ujjmeszaros/bootstrap-duallistbox

基本使用

需要用到的JS和CSS檔案位於專案程式碼下的dist目錄中，需要將這個目錄中的對應檔案放入你的專案裡，這一步不贅述

  1. 引入CSS/JS檔案，由於bootstrap-duallistbox是基於bootstrap的，所以要先引入bootstrap相關的css和js
<!-- 載入bootstrap -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
            
<!-- 載入bootstrap-dualllistbox -->
<link rel="stylesheet" href="static/bootstrap-duallistbox/bootstrap-duallistbox.css">
<script src="static/bootstrap-duallistbox/jquery.bootstrap-duallistbox.js"></script>
  1. 載入duallistbox外掛
<select class="form-control" multiple="multiple" name="groups" size="10">
    <option value="1">GroupA</option>
    <option selected value="2">GroupB</option>
    <option value="3">GroupC</option>
    <option value="4">GroupD</option>
    <option selected value="5">GroupE</option>
    <option value="6">GroupF</option>
    <option value="7">GroupG</option>
</select>

<script>
    var selectorx = $('select[name="groups"]').bootstrapDualListbox();
</script>
  1. 完成以上兩步可以看到頁面效果如下

前端外掛之Bootstrap Dual Listbox使用

非常簡單，到這裡已經可以正常使用這個控制元件了，更多的花樣接著往下看

配置說明

整個介面為英文顯示，有預設提示，如果你想將提示改為中文或新增自定義的提示內容，那麼可以通過如下配置

var selectorx = $('select[name="groups"]').bootstrapDualListbox({
    nonSelectedListLabel: '未選擇的組',
    selectedListLabel: '已選擇的組',
    filterTextClear: '展示所有',
    filterPlaceHolder: '過濾搜尋',
    moveSelectedLabel: "新增",
    moveAllLabel: '新增所有',
    removeSelectedLabel: "移除",
    removeAllLabel: '移除所有',
    infoText: '共{0}個組',
    infoTextFiltered: '搜尋到{0}個組 ,共{1}個組',
    infoTextEmpty: '列表為空',
});

以上配置都比較簡單，對照中文就能知曉意思，不做過多解釋，另外有幾個支援的引數說明如下：

infoText： 除了設定字串外還可設定為false，當設定為false時可隱藏這段資訊

showFilterInputs： 預設為true，是否顯示filter過濾框

moveOnSelect： 預設為true，點選便會變更選項到對應的選擇框內，如果設定為false則會在出現moveSelected的箭頭需要點選箭頭或者雙擊選項後才能變更選項到對應的選擇框

nonSelectedFilter： 未選中的預設過濾規則，可以配置為OPS-COFFEE-A則未選中的框內只會顯示OPS-COFFEE-A

selectedFilter： 已選中的預設規則，與noSelectedFilter類似

使用進階

獲取已選擇的值

selectorx.val()

獲取select外掛物件

selectorx.bootstrapDualListbox('getContainer')

重新整理外掛元素使用者介面

selectorx.bootstrapDualListbox('refresh');

刪除bootstrap-duallistbox外掛，恢復select原樣

selectorx.bootstrapDualListbox('destroy');

動態新增select的option

selectorx.append('<option value="9" selected>ops-coffee.cn</option>');
selectorx.bootstrapDualListbox('refresh');

注意：上文中的所有selectorx都為載入duallistbox時例項化的select物件

完整Demo

為了方便大家學習，我寫了個完整的demo，你可以線上檢視效果或下載程式碼應用到自己的專案中

線上Demo地址：https://demo.ops-coffee.cn/duallistbox/

Github原始碼地址：https://github.com/ops-coffee/demo/tree/master/duallistbox

掃碼關注公眾號檢視更多實用文章

相關文章