1. 菜单抽取
将jsp公共部分抽取出来方便修改,建立一个单独的文件夹,使用<%@include file="文件路径" %>
进行引用。
2. 设置被点中的菜单标红,并默认展开
控制是否展开菜单,与"tree-closed"和"display:none;"控制有关
$(function () {
$(".list-group-item").click(function(){
if ( $(this).find("ul") ) {
$(this).toggleClass("tree-closed");
if ( $(this).hasClass("tree-closed") ) {
$("ul", this).hide("fast");
} else {
$("ul", this).show("fast");
}
}
});
queryPageUser(1);
showMenu();
});
编写showMenu方法,代码如下,并建立js文件夹。在需要的地方引入相应的js和方法。
// 被点中的菜单标红,并默认展开
function showMenu(){
//获取path路径
var pathAddress = window.location.pathname;
// 进行判断
var alink = $(".list-group a[href*='"+pathAddress+"']");
alink.css("color","red");
//去除样式类
alink.parent().parent().parent().removeClass("tree-closed");
alink .parent().parent().show();
}
抽取:
引入:
3. 角色分配 - 页面跳转
绑定点击事件并传入相应的id值
COntroller:
@RequestMapping("/toassignrole")
public String assignRole(Integer id,Map map){
List<Role> allListRole = userService.queryAllRole();
List<Integer> roleIds = userService.queryByUserId(id);
//未分配角色
List<Role> leftRoleList = new ArrayList<Role>();
//已分配角色
List<Role> rightRoleList = new ArrayList<Role>();
for(Role role : allListRole){
//使用if判断,包含Id放右边,不包含就放左边
if(roleIds.contains(role.getId())){
rightRoleList.add(role);
}else{
System.out.println(role.getId());
leftRoleList.add(role);
}
}
map.put("rightRoleList",rightRoleList);
map.put("leftRoleList",leftRoleList);
return "user/assignrole";
}
查询方法实现:
public List<Role> queryAllRole() {
return userMapper.queryAllRole();
}
public List<Integer> queryByUserId(Integer id) {
return userMapper.queryRoleByUserId(id);
}
}
Mapper:
<select id="queryAllRole" resultType="com.itstudy.crw.bean.Role">
select id,name from t_role;
</select>
<select id="queryRoleByUserId" parameterType="int" resultType="int">
select roleid from t_user_role where userid=#{id} ;
</select>
效果:
4. 角色分配 — 分配与取消(异步)
原理是对数据库的增加和删除操作
-
给按钮绑定点击事件,jsp代码:
//分配角色 $("#leftToRightBtn").click(function(){ var selectedOptions = $("#leftRoleList option:selected"); var jsonObj = { userid : "${param.id}" }; $.each(selectedOptions,function(i,n){ jsonObj["ids["+i+"]"] = this.value ; }); var index = -1 ; $.ajax({ type : "POST", data : jsonObj, url : "${APP_PATH}/user/doAssignRole.do", beforeSend : function(){ index = layer.load(2, {time: 10*1000}); return true ; }, success : function(result){ layer.close(index); if(result.success){ $("#rightRoleList").append(selectedOptions.clone()); selectedOptions.remove(); }else{ layer.msg(result.message, {time:1000, icon:5, shift:6}); } }, error : function(){ layer.msg("操作失败!", {time:1000, icon:5, shift:6}); } }); }); //取消角色 $("#rightToLeftBtn").click(function(){ var selectedOptions = $("#rightRoleList option:selected"); var jsonObj = { userid : "${param.id}" }; $.each(selectedOptions,function(i,n){ jsonObj["ids["+i+"]"] = this.value ; }); var index = -1 ; $.ajax({ type : "POST", data : jsonObj, url : "${APP_PATH}/user/doUnAssignRole.do", beforeSend : function(){ index = layer.load(2, {time: 10*1000}); return true ; }, success : function(result){ layer.close(index); if(result.success){ $("#leftRoleList").append(selectedOptions.clone()); selectedOptions.remove(); }else{ layer.msg(result.message, {time:1000, icon:5, shift:6}); } }, error : function(){ layer.msg("操作失败!", {time:1000, icon:5, shift:6}); } }); });
-
Controller
//分配角色 @ResponseBody @RequestMapping("/doAssignRole") public Object doAssignRole(Integer userid, Data data){ AjaxResult result = new AjaxResult(); try { userService.saveUserRoleRelationship(userid,data); result.setSuccess(true); } catch (Exception e) { result.setSuccess(false); e.printStackTrace(); result.setMessage("分配角色数据失败!"); } return result; } //取消分配角色 @ResponseBody @RequestMapping("/doUnAssignRole") public Object doUnAssignRole(Integer userid,Data data){ AjaxResult result = new AjaxResult(); try { userService.deleteUserRoleRelationship(userid,data); result.setSuccess(true); } catch (Exception e) { result.setSuccess(false); e.printStackTrace(); result.setMessage("取消分配角色数据失败!"); } return result; }
-
service接口与实现
-
Mapper:因为传入多个参数,需要用@Parm注解
-
Mapper.xml