基于bootstrap的multselect左右多选多

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u012796085/article/details/79970339

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

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页