使用IDEA的众筹项目（六）角色分配

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. 角色分配 — 分配与取消（异步）

原理是对数据库的增加和删除操作

1. 给按钮绑定点击事件，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});
        		}
        	});
     });
   

2. 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; 
    }
   

3. service接口与实现
   
   

4. Mapper：因为传入多个参数，需要用@Parm注解
   

5. Mapper.xml