前端插件之Bootstrap Dual Listbox使用教程

对于很多非专业前端开发来说写页面是非常痛苦的，借助框架或插件往往能够达到事半功倍的效果，本系列文章会介绍我在运维系统开发过程中用到的那些顺手的前端插件，如果你是想写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" 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.完成以上两步可以看到页面效果如下

非常简单，到这里已经可以正常使用这个控件了，更多的花样接着往下看

配置说明

整个界面为英文显示，有默认提示，如果你想将提示改为中文或添加自定义的提示内容，那么可以通过如下配置

var selectorx = $('select[name="groups"]').bootstrapDualListbox({  nonSelectedListLabel: '未选择的组',  selectedListLabel: '已选择的组',  filterTextClear: '展示所有',  filterPlaceHolder: '过滤搜索',  moveSelectedLabel: "添加",  moveAllLabel: '添加所有',  removeSelectedLabel: "移除",  removeAllLabel: '移除所有',  infoText: '共{0}个组',  infoTextFiltered: '搜索到{0}个组 ,共{1}个组',  infoTextEmpty: '列表为空',});