基于bootstrap的multselect左右多选多

1,控件官网文档:

http://www.jiaoben123.com/uploadfiles/demo/d19cb85fac5b4c74bb4e387852f7d23b/#documentation

2,页面基本结构

<div class="row">
	<div class="col-xs-5">
		<select name="from" id="multiselect" class="form-control" size="8" multiple="multiple">
			<option value="1">Item 1</option>
			<option value="2">Item 5</option>
			<option value="2">Item 2</option>
			<option value="2">Item 4</option>
			<option value="3">Item 3</option>
		</select>
	</div>
	
	<div class="col-xs-2">
		<button type="button" id="multiselect_rightAll" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button>
		<button type="button" id="multiselect_rightSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
		<button type="button" id="multiselect_leftSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
		<button type="button" id="multiselect_leftAll" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button>
	</div>
	
	<div class="col-xs-5">
		<select name="to" id="multiselect_to" class="form-control" size="8" multiple="multiple"></select>
	</div>
</div>

控件id命名规则：左边的select的id如果为:testid,则所有按钮和右边的select的Id前缀都要为testid

<script type="text/javascript">
    jQuery(document).ready(function($) {
    	$('#multiselect').multiselect();
    });
</script>

3，实际案例

案例为用户授予角色，一个用户可有多个角色，需要用户表，角色表，用户角色关联表

3.1，后台构建multselect的数据源

从角色表获取所有角色，并区分已授予的角色，ISNULL(u.rcode)是当sys_user_role表没有用户角色则返回1，如果有则返回0

 <select id="getMultselectRoles" parameterType="java.lang.Integer" resultType="java.util.HashMap">
    SELECT r.rcode,r.rname,ISNULL(u.rcode) AS chick
    FROM sys_role r
    LEFT JOIN sys_user_role u ON u.rcode=r.rcode AND u.uid=#{uid}
  </select>

3.2，前台使用ajax获取multselect的数据源

//打开编辑角色弹层
function editRoleModal(uid){
    userid=uid;
    $("#multiselectleft").empty();
    $("#multiselectleft_to").empty();
    $.ajax({
        type: "POST",dataType: "JSON",
        url:"/role/getMultselectRoles",
        data: {uid:uid},
        async : false,
        success: function(data){
            if(data.code==200){
                var options=data.data;
                var selectleft = '';
                var selectright = '';
                //<option value="3" data-position="3">Item 3</option>
				for(var i=0;i<options.length;i++){
					if(options[i].chick){
                        selectright+='<option value="'+options[i].rcode+'" data-position="'+options[i].rcode+'">'+options[i].rname+'</option>';
					}else{
                        selectleft+='<option value="'+options[i].rcode+'" data-position="'+options[i].rcode+'">'+options[i].rname+'</option>';
					}
				}
				$("#multiselectleft").append(selectleft);
				$("#multiselectleft_to").append(selectright);
            }else{
                layer.msg(data.msg,{icon:5,time:1000});
            }
        }
    });
    $('#multiselectleft').multiselect();
    $("#roleModal").modal("show");
}

3.3，使用模态框显示角色授权编辑框

<!-- 修改用户角色模态框（Modal） -->
<div class="modal fade" id="roleModal" tabindex="-2" role="dialog" aria-labelledby="editRoleLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="editRoleLabel">
					编辑角色
				</h4>
			</div>
			<div class="modal-body row">
				<div class="col-lg-5">
					<h4>已有角色</h4>
					<select name="from[]" id="multiselectleft" class="form-control has-success" size="10" multiple="multiple">
					</select>
				</div>

				<div class="col-lg-2" style="margin-top: 50px;">
					<button type="button" id="multiselectleft_rightAll" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button>
					<button type="button" id="multiselectleft_rightSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
					<button type="button" id="multiselectleft_leftSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
					<button type="button" id="multiselectleft_leftAll" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button>
				</div>
				<div class="col-lg-5">
					<h4>未授予角色</h4>
					<select name="to[]" id="multiselectleft_to" class="form-control" size="10" multiple="multiple"></select>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-primary" onclick="submitRole();">提交</button>
				<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>

3.4，提交角色修改

userid为全局变量，在打开模态框时被赋值

//提交授予角色
function submitRole() {
    var array = new Array();  //定义数组
    $("#multiselectleft option").each(function(){  //遍历所有option
        var txt = $(this).val();   //获取option值
        if(txt!=''){
            array.push({rcode:txt,uid:userid});  //添加到数组中
        }
    });
    var param = {multselect:JSON.stringify(array),uid:userid};
    $.ajax({
        type: "POST",dataType: "JSON",
        url:"/role/editUserRoles",
        data: param,
        async : false,
        success: function(data){
            if(data.code==200){
                $("#roleModal").modal("hide");
                layer.msg(data.msg,{icon:6,time:1000});
                $("#userListTable").bootstrapTable("refresh");
            }else{
                layer.msg(data.msg,{icon:5,time:1000});
            }
        }
    });
}

3.5，后台数据处理

import net.sf.json.JSONArray;
/**
 * 修改用户角色多选多数据
 */
@ResponseBody
@RequestMapping(value = "/editUserRoles", produces = {"application/json;charset=UTF-8"})
public ResponseData editUserRoles(HttpServletRequest request){
    ResponseData res = new ResponseData();
    try {
        int uid = Integer.parseInt(request.getParameter("uid"));
        String rolejson=request.getParameter("multselect");
        List<HashMap>  rolemodules = JSONArray.fromObject(rolejson);
        roleService.editUserRole(rolemodules,uid);
        res.setSuccess(true);
        res.setMsg("操作成功");
    } catch (Exception e) {
        res.setSuccess(false);
        e.printStackTrace();
        res.setMsg("系统异常");
    }
    return res;
}


/**
 *service层添加事务，进行多条sql操作
 * 删除用户角色，再批量插入
 */
@Override
public void editUserRole(List<HashMap> roles,Integer uid) {
     dao.deleteUserRole(uid);
     if(roles.size()>0){
         dao.addUserRoles(roles);
     }
}
//使用foreach批量插入用户角色关联表数据
<insert id="addUserRoles">
    insert into sys_user_role(uid,rcode)
    values
    <foreach collection="list" item="emp" separator=",">
      (#{emp.uid},#{emp.rcode})
    </foreach>
</insert>

3.6，bootstrap multselect插件必须的js与css

https://download.csdn.net/download/u012796085/10353961