基於bootstrap的multselect左右多選多
阿新 • • 發佈：2019-01-11
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 控制元件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">
×
</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>