layui穿梭框动态查询、添加、删除基于ssm(layui.transfer)

layui穿梭框动态查询、添加、删除基于ssm(layui.transfer)

一、前端代码
1.定义角色的弹层页面

<!--角色的弹层页面  -->
<div id="editRoleLayer" style="display: none; margin-top: 20px;">
	<form class="layui-form" lay-filter="editRoleForm" id="editRoleForm"
		action="">
		<div id="test1" class="demo-transfer"></div>
	</form>
</div>

2.设置打开穿梭框弹层功能

//打开穿梭框弹层
layer.open({
	type: 1,
	title: '您正在设置用户[' + data.loginName + ']的角色',
	content: $("#editRoleLayer"),
	area: ['500px', '400px'],
	fixed: false, //不固定
	maxmin: true,
	offset: '10px'
});

3.Ajax请求处理数据

//获取穿梭框左边数据
$.ajax({
	type: 'post',				
	url: globalDate.server + "roles/GetRolesAll",	
	data: {
		"token": globalDate.token
	}, 
	dataType: 'json', 			
	success: function(res) {
		var zuo = res;
		
		//获取穿梭框右边数据
		var you =  new Array();
		$.ajax({
			type: 'post',				
			url: globalDate.server + "roles/getRolesByUid",	
			data: {
				"id": data.id,
				"token": globalDate.token
			}, 
			dataType: 'json', 			
			success: function(res) {
				if(res.count > 0) {
					for(var i = 0; i < res.data.length; i++) {
						you.push(res.data[i].id);
					}
				}
				
				//渲染穿梭框
				transfer.render({
					elem: '#test1',
					title: ['系统所有角色', '当前用户的角色'],
					data: zuo,
					value: you,
					parseData: function(udata) {
									return {
										"value": udata.id, //数据值
										"title": udata.name //数据标题
									}
								},
					onchange: function(obj, index) {
						if(index == "0") {
								//新增用户角色
								for (var i = 0; i < obj.length; i++) {
									$.ajax({
										type: "post",
										url: "" + globalDate.server + "user/AddUserToRole",
										data: {
											"userid": data.id,
											"roleid": obj[i].value,
											"token": globalDate.token
										},
										dataType: 'json',
										success: function(res) { //提交成功
										
										},
										error: function() { //提交失败
											alert("系统异常！！")
										}
									});
								}
				
						} else {
							//删除用户角色
							for(var i = 0; i < obj.length; i++) {
								$.ajax({
									type: "post",
									url: "" + globalDate.server + "user/RemoveUserFromRole",
									data: {
										"userid": data.id,
										"roleid": obj[i].value,
										"token": globalDate.token
									},
									dataType: 'json',
									success: function(res) { //提交成功
									
									},
									error: function() { //提交失败
										alert("系统异常！！")
									}
								});
							}
				
						}
					}
				});
			},
			error: function() {
				alert("获取失败！！！")
			}
		});
	},
	error: function() {
		alert("获取失败！！！")
	}
});

二、后端代码
1.mapper接口

/**
 * 查询全部角色
 * @return
 */
List<Roles> selectRolesAll();
/**
 * 根据id查询角色
 * @param id
 * @return
 */
List<Roles> getRolesByUid(String id);
/**
 * 移除用户角色
 * @param userId
 * @param roleId
 * @return
 */
int deleteByUidAndRoleid(String userid,String roleid);

/**
 * 分配用户角色
 * @param id
 * @param userId
 * @param roleId
 * @return
 */
int insertByUidAndRoleid(String id,String userid,String roleid);

2.service层

/**
 * 查询全部角色
 * @return
 */
List<Roles> selectRolesAll();
/**
 * 根据id查询角色
 * @param id
 * @return
 */
List<Roles> getRolesByUid(String id);
/**
 * 移除用户角色
 * @param userId
 * @param roleId
 * @return
 */
int deleteByUidAndRoleid(String userid,String roleid);

/**
 * 分配用户角色
 * @param id
 * @param userId
 * @param roleId
 * @return
 */
int insertByUidAndRoleid(String id,String userid,String roleid);

3.serviceImpl层

@Override
public List<Roles> selectRolesAll() {
	// TODO Auto-generated method stub
	return rolesMapper.selectRolesAll();
}
@Override
public List<Roles> getRolesByUid(String id) {
	// TODO Auto-generated method stub
	return rolesMapper.getRolesByUid(id);
}
@Override
public int deleteByUidAndRoleid(String userid, String roleid) {
	// TODO Auto-generated method stub
	return userRolesMapper.deleteByUidAndRoleid(userid, roleid);
}

@Override
public int insertByUidAndRoleid(String id, String userid, String roleid) {
	// TODO Auto-generated method stub
	return userRolesMapper.insertByUidAndRoleid(id, userid, roleid);
}

4.controller层

//查询全部角色
@RequestMapping("/GetRolesAll")
	public List<Roles> GetRolesAll() {
		return rolesService.selectRolesAll();
	}
//查询用户拥有的角色	
@RequestMapping("/getRolesByUid")
public Map<String, Object> getRolesByUid(String id) {
	Map<String, Object> map = new HashMap<>();
	List<Roles> rolList = rolesService.getRolesByUid(id);
	map.put("code", "0");
	map.put("msg", "success");
	map.put("count", rolList.size());
	map.put("data", rolList);
	return map;
}
//删除用户角色
@RequestMapping("/RemoveUserFromRole")
public boolean RemoveUserFromRole(String userid,String roleid) {
	return userRolesService.deleteByUidAndRoleid(userid,roleid)>0?true:false;
} 
//增加用户角色
@RequestMapping("/AddUserToRole")
public boolean AddUserToRole(String userid,String roleid) {
	String id = UUIDUtil.getUUID();
	return userRolesService.insertByUidAndRoleid(id,userid,roleid)>0?true:false;
}

5.mapper.xml

<select id="getRolesByUid" resultType="roles" parameterType="java.lang.String" >
    select r.* from roles r,userroles ur
    where ur.RoleId=r.Id and ur.UserId = #{id,jdbcType=VARCHAR}
</select>
  
<select id="selectRolesAll" resultType="roles">
 select * from roles
</select>

<delete id="deleteByUidAndRoleid">
    delete from userroles
    where UserId = #{userid} and RoleId = #{roleid}
</delete>

<insert id="insertByUidAndRoleid">
    insert into userroles(Id,UserId,RoleId) values(#{id},#{userid},#{roleid})
</insert>

每天进步一点点！！！！奥里给