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">
×
</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>