1. 程式人生 > >外掛介紹:Bootstrap 下拉多選框外掛Bootstrap Multiselect

外掛介紹:Bootstrap 下拉多選框外掛Bootstrap Multiselect

<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css"/>


<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script
>
<script type="text/javascript" src="js/bootstrap.min.js"></script>

使用
jsp頁面

 <div class="form-group">
                            <label class="col-sm-4 control-label"><i class="required">*&nbsp;</i>所屬部門:</label>
                            <div class
="col-sm-6">
<div class="myOwnDdl"> <select name="expendProject" id="user_dept" class="form-control"> <option value="" selected="selected">請選擇部門</option> </select
>
</div> </div> </div> <div class="form-group"> <label class="col-sm-4 control-label"><i class="required">*&nbsp;</i>所屬角色:</label> <div class="col-sm-6"> <div class="myOwnDdl"> <select name="expendProject" id="user_role" class="form-control" multiple="multiple"> <c:forEach var="var" items="${requestScope.roles }"> <option value="${var.id}">${var.roleName}</option> </c:forEach> </select> </div> </div> </div>

樣式:

 /* select -mul*/
    /*自定義寬度*/
    .myOwnDdl{
        display:inline-block;
        width:100%;
    }

    /* 實現寬度自定義 */
    .myOwnDdl .btn-group{
        width:100%;
    }
    .myOwnDdl .multiselect {
        width:100%;
        text-align:right;
        margin-top:-5px;
    }
    .myOwnDdl ul {
        width:100%;
    }
    .myOwnDdl .multiselect-selected-text {
        position:absolute;
        left:0;
        right:25px;
        text-align:left;
        padding-left:20px;
    }

    /*控制隔行換色*/
    .myOwnDll .multiselect-container li.odd {
        background: #eeeeee;
    }
    /*//控制select文字內容位置*/
    .btn-group>.btn:first-child {
        margin-left: 0;
        padding-right: 90%;
    }
    /* select -mul end */

js:

 $("#user_role").multiselect({  //分別為控制下拉容器最大高度、最多允許具體展示選中項數(其餘以數字形式展示)、隔行換色控制、全選、支援檢索。
                maxHeight:300,
                numberDisplayed:3,
                optionClass: function(element) {
                    var value = $(element).parent().find($(element)).index();
                    if (value%2 == 0) {
                        return 'even';
                    }
                    else {
                        return 'odd';
                    }
                },
                includeSelectAllOption: true,
                enableFiltering: true,
                selectAllJustVisible: true,
                nonSelectedText: '請選擇角色', //預設展示文字
                selectAllText: '全選'  //全選文字

            });

相關程式碼備忘:

    // 使用者角色分配
        function user_role(userId) {
            $("#add-role-form")[0].reset();
//            為表單隱藏域設定使用者值
            $("#userId").val(userId);
            $("#user_role").multiselect({  //分別為控制下拉容器最大高度、最多允許具體展示選中項數(其餘以數字形式展示)、隔行換色控制、全選、支援檢索。
                maxHeight:300,
                numberDisplayed:3,
                optionClass: function(element) {
                    var value = $(element).parent().find($(element)).index();
                    if (value%2 == 0) {
                        return 'even';
                    }
                    else {
                        return 'odd';
                    }
                },
                includeSelectAllOption: true,
                enableFiltering: true,
                selectAllJustVisible: true,
                nonSelectedText: '請選擇角色', //預設展示文字
                selectAllText: '全選' , //全選文字,
                onChange: function(option, checked, select) {
//                      副處長展示業務
                    if($(option).text() == '副處長' && checked) {
                        //副處長id賦值
                        $("#userRoleId").val($(option).val());
                        $.get("mvc/system/get-business/"+"?"+Math.random(),function(resp){
                            var business = resp.business;
                            //拼接下拉框
                            $("#user_business option").remove();
                            var bus_options = $("#user_business");
                            if(business) {

                                $.each(business, function(index,item) {
                                    bus_options.append($("<option />").val(item.id).text(item.keyValue));
                                });
                                $('#user_business').multiselect('rebuild');
                                $('#user_business').multiselect('enable');
                            }
                        },"json");
                    }else {
                        //清空
                        $("#user_business option").remove();
                        $('#user_business').multiselect('rebuild');
                        $('#user_business').multiselect('disable');
                    }
                },
            });
            $('#user_business').multiselect({  //分別為控制下拉容器最大高度、最多允許具體展示選中項數(其餘以數字形式展示)、隔行換色控制、全選、支援檢索。
                maxHeight:300,
                numberDisplayed:3,
                optionClass: function(element) {
                    var value = $(element).parent().find($(element)).index();
                    if (value%2 == 0) {
                        return 'even';
                    }
                    else {
                        return 'odd';
                    }
                },
                nonSelectedText: '請選擇業務(副處長)', //預設展示文字
            });
            //設定樣式
            //後臺查詢使用者部門
            $.get("mvc/system/user-dept/"+userId+"?"+Math.random(),function(resp){
                var depts = resp.depts;

                //拼接下拉框
                $("#user_dept option:not(:first)").remove();
                var options = $("#user_dept");

                $.each(depts, function(item,dept) {
                    options.append($("<option />").val(dept.id).text(dept.name));
                });

                $("#user_dept").multiselect({
                    onChange: function(option, checked, select) {
//                        查詢已有角色
                        var deptId = $(option).val();
                        if(deptId){
//                            為表單隱藏域設定部門id
                            $("#userDept").val(deptId);
                            $.get("mvc/system/user-roles/"+userId+"/"+deptId+"?"+Math.random(),function (resp) {
                                var userRoles = resp.userRoles;
                                //包含副處長則業務多選可用
                                var flag = false;
                                $.each(userRoles,function (index,item) {
                                    if (item.alertRole.remark == 'DEPUTY_TYPE') {//查詢副處長業務

                                        //副處長roleID
                                        $("#userRoleId").val(item.alertRole.id);
                                        //清空選擇
                                        $('#user_business option:selected').each(function() {
                                            $(this).prop('selected', false);
                                        })
                                        flag = true;
                                        $.get("mvc/system/get-business/"+"?"+Math.random(),function(resp){
                                            var business = resp.business;
                                            //拼接下拉框
                                            $("#user_business option").remove();
                                            var bus_options = $("#user_business");
                                            if(business) {

                                                $.each(business, function(index,item) {
                                                    bus_options.append($("<option />").val(item.id).text(item.keyValue));
                                                });
                                                $('#user_business').multiselect('rebuild');
                                            }
                                        },"json");
                                        //查詢業務並顯示
                                        $.post("mvc/system/get-business-select",
                                                { id: userId, did: deptId,rid: item.alertRole.id },
                                                function(succ){
                                                    var bs = succ.business;
                                                    if(bs.length != 0) {
                                                        $.each(bs, function(index, item){
                                                            $('#user_business').multiselect('select', item.businessId);
                                                        });
                                                    }
                                                },
                                                "json");
                                        $('#user_business').multiselect('refresh');
                                    }
                                });
                                //不包含副處長則禁用多選框
                                if(!flag) {
                                    //清空
                                    $("#user_business option").remove();
                                    $('#user_business').multiselect('rebuild');
                                    $('#user_business').multiselect('disable');
                                }else {
                                    $('#user_business').multiselect('enable');
                                }
                                //清空選擇
                                $('#user_role option:selected').each(function() {
                                    $(this).prop('selected', false);
                                })
                                $.each(userRoles, function(index, item){
                                    $('#user_role').multiselect('select', item.alertRole.id);
                                });
                                $('#user_role').multiselect('refresh');
                            },"json");
                        }
                    },
                });
            },"json");
            //業務
            $("#user_role").multiselect({

            })
            //後臺查詢使用者擁有角色
            $("#userRoleModal").modal('show');
        }
  //得到選擇項
                   $('#dutyDeptId-update option:selected').map(function(index, item){
                     //item
                   });