對于很多非專業(yè)前端開發(fā)來說寫頁面是非常痛苦的，借助框架或插件往往能夠達(dá)到事半功倍的效果，本系列文章會介紹我在運(yùn)維系統(tǒng)開發(fā)過程中用到的那些順手的前端插件，如果你是想寫XX管理系統(tǒng)的學(xué)生、或是需要獨(dú)自做Dashboard的后端工程師、亦或是像我這樣半吊子的開發(fā)加運(yùn)維，那么這個(gè)系列的文章你一定不要錯(cuò)過

Bootstrap Dual Listbox是一款基于Bootstrap的雙向select選擇框控件，作為對multiple select的擴(kuò)展，使用起來非常簡單，功能也更強(qiáng)大

項(xiàng)目Github地址：https://github.com/istvan-ujjmeszaros/bootstrap-duallistbox

基本使用

需要用到的JS和CSS文件位于項(xiàng)目代碼下的dist目錄中，需要將這個(gè)目錄中的對應(yīng)文件放入你的項(xiàng)目里，這一步不贅述

1.引入CSS/JS文件，由于bootstrap-duallistbox是基于bootstrap的，所以要先引入bootstrap相關(guān)的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" >     
<!-- 加載bootstrap-dualllistbox -->
<link rel="stylesheet" href="static/bootstrap-duallistbox/bootstrap-duallistbox.css" rel="external nofollow" >
<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.完成以上兩步可以看到頁面效果如下

非常簡單，到這里已經(jīng)可以正常使用這個(gè)控件了，更多的花樣接著往下看

配置說明

整個(gè)界面為英文顯示，有默認(rèn)提示，如果你想將提示改為中文或添加自定義的提示內(nèi)容，那么可以通過如下配置

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

以上配置都比較簡單，對照中文就能知曉意思，不做過多解釋，另外有幾個(gè)支持的參數(shù)說明如下：

infoText： 除了設(shè)置字符串外還可設(shè)置為false，當(dāng)設(shè)置為false時(shí)可隱藏這段信息

showFilterInputs： 默認(rèn)為true，是否顯示filter過濾框

moveOnSelect： 默認(rèn)為true，點(diǎn)擊便會變更選項(xiàng)到對應(yīng)的選擇框內(nèi)，如果設(shè)置為false則會在出現(xiàn)moveSelected的箭頭需要點(diǎn)擊箭頭或者雙擊選項(xiàng)后才能變更選項(xiàng)到對應(yīng)的選擇框

nonSelectedFilter： 未選中的默認(rèn)過濾規(guī)則，可以配置為OPS-COFFEE-A則未選中的框內(nèi)只會顯示OPS-COFFEE-A

selectedFilter： 已選中的默認(rèn)規(guī)則，與noSelectedFilter類似

使用進(jìn)階

獲取已選擇的值

selectorx.val()

獲取select插件對象

selectorx.bootstrapDualListbox('getContainer')

刷新插件元素用戶界面

selectorx.bootstrapDualListbox('refresh');

刪除bootstrap-duallistbox插件，恢復(fù)select原樣

selectorx.bootstrapDualListbox('destroy');

動態(tài)添加select的option

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

注意：上文中的所有selectorx都為加載duallistbox時(shí)實(shí)例化的select對象

完整Demo

為了方便大家學(xué)習(xí)，我寫了個(gè)完整的demo，你可以在線查看效果或下載代碼應(yīng)用到自己的項(xiàng)目中

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

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

總結(jié)

以上所述是小編給大家介紹的前端插件之Bootstrap Dual Listbox使用教程,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

最新評論