今天做项目遇到了一个需要用多选框实现多选功能、并将多选框的值传到后台实现插入一张表的问题,最开始一直在想用复选框实现多选功能,后来发现做起来页面不好看,最后在网上查资料,想找到一种方便使用的插件,最后选择了multiselect这个插件。
首先简单说下我要实现的功能。需要做添加一个用户对应多个角色的功能,即在新增一个用户user的时候给他选择多个角色,新增成功时将多个角色对应的id和新增的用户id插入到role_user表中。
1)实现下拉框多选。代码如下:
首先引入需要用到的文件jquery.js, jquery.multiSelect.js, jquery.bgiframe.min.js, jquery.multiSelect.css, 页面代码如下:
<tr>
<td class="tableleft">角色</td>
<td class="hovercolor">
<select class="inputtext" id="rIds" name="rIds" multiple="multiple" style="height:29px;width:120px;" required>
<option value="">--角色--</option>
<c:forEach items="${roles}" var="item" varStatus="cStatus">
<option value="${item.id}" <%-- <c:if test="${item.id == orgId}">selected="selected"</c:if> --%>>${item.roleName}</option>
</c:forEach>
</select>
</td>
</tr>
js代码如下:
var delIds = [];
$(document).ready( function() {
$("#rIds").multiSelect({
selectAll: false,
oneOrMoreSelected: '*',
selectAllText: '全选',
noneSelected: '--角色--'
}, function(){ //回调函数
if($("[name*='rIds']:checked").length > 0)
{
$("input[name*='rIds']:checked").each(function(){
var index = $.inArray($(this).attr("value"), delIds); //$.inArray()去重
if(-1 == index) {
delIds.push($(this).attr("value"));//将选中的选项的值放到一个数组中,并去重,这样成功获取到选中的选项的value值,比网上的方法简单多了~
}
});
}
});
});
2)保存方法代码如下:
function saveOrUpdateUser (){
var loginName = $("#loginname").val();
var userName = $("#username").val();
var orgId = $("#orgId").val();
var pwd = $("#pwd").val();
var rIds = delIds;
var userId= 0;
if(checkLoginName() && checkUserName() && checkPwdOne() && checkPwdTwo()){
pwd = encrypt(pwd,loginName);
$.ajax({
type:"POST",
url:ctx + "/user/editUser",
cache:false,
dataType:"json",
data:{
loginName:loginName,
userName:userName,
pwd:pwd,
orgId:orgId,
rIds:rIds,
id : userId
},
success:function(data){
if(data.success){
layer.msg("操作成功",{
icon: 1,
time: 2000 //2秒关闭(如果不配置,默认是3秒)
},function(){
parent.layer.close(index); //根据窗口索引关闭窗口
});
} else {
layer.msg(data.msg,{
icon: 2,
time: 2000 //2秒关闭(如果不配置,默认是3秒)
},function(){
parent.layer.close(index); //根据窗口索引关闭窗口
});
}
}
});
}
}
3)java部分代码如下:
userService.insert(userVo);
for (int i = 0; i < rIds.length; i++) {
RoleUser roleUser = new RoleUser();
roleUser.setRoleId(rIds[i]);
roleUser.setUserId(userVo.getId());
roleUserService.insert(roleUser);
}
4)由于我表中设置的主键id均是Integer自增,用的框架是SpringMVC+MyBatis,在新增用户的同时还需要将新增用户的id以及对应的多个角色id插入到role_user表中,因此需要将对应xml文件中的insert方法改写,之前写的insert方法返回的都是0或1,即表示插入是否成功,现在需要改写使它的返回值为对应的用户id,这样在新增用户的同时可以调用其getId方法将其id值获取并成功插入到role_user表中,改写代码如下:
<insert id="insert" useGeneratedKeys="true" keyProperty="id" parameterType="com.zcsy.manage.model.system.User">