外掛介紹:Bootstrap 下拉多選框外掛Bootstrap Multiselect
阿新 • • 發佈:2019-02-15
<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">* </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">* </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
});