前些天做了一个利用Jquery做了一个系统授权的东东,个人感觉不错,主要是感觉代码很精简,留个纪念吧,公司有规定,我只截了一部分吧的图片,看图直观啊
上代码:
jsp页面代码:
<div id="listRolePermission">
<c:forEach var="item" items="${result.map.items}">
<div class="dialogPermissionContent">
<input type="checkbox" class="permission_grandpa" <c:if test="${item['selected'] eq 'selected' }">checked="checked"</c:if> />${item['key']}
<c:forEach items="${item['list']}" var="permission">
<div class="permissionFather">
<input type="checkbox" class="permission_father"<c:if test="${permission.selected eq 'selected' }">checked="checked"</c:if> />${permission.name}
<div class="permissionSon">
<c:forEach items="${permission['list']}" var="permissionItem">
<input type="checkbox" class="permission_son" value="${permissionItem.permissionId}" <c:if test="${permissionItem.selected eq 'selected' }">checked="checked"</c:if> />${permissionItem.label}
</c:forEach>
</div>
</div>
</c:forEach>
</div>
</c:forEach>
</div>
js代码://这里不难,在这里真真感觉到了jQuery的强大啊,尤其是那选择器,太NX了
$("#listRolePermission").find("input").each(function(){
if($(this).attr("checked") == true){
$(this).addClass("select");
$(this).parentsUntil("#listRolePermission").find(".permission_grandpa").attr("checked",true);
}
});
$(".permissionFather").children().find("input").each(function(){
if($(this).attr("checked") == true){
$(this).addClass("select");
$(this).parentsUntil(".permissionFather").parent().children("input").attr("checked",true);
}
});
$(".permission_grandpa").live("click",function() {
var flag = $(this).attr("checked");
$(this).parent().children().find("input").each(function() {
$(this).attr("checked", flag);
if(flag){$(this).addClass("select");}else{ $(this).removeClass("select");}
});
});
$(".permission_father").live("click",function() {
var flag = $(this).attr("checked");
var $grandpa = $(this).parent().parent();
$(this).parent().children().find("input").each(function() {
$(this).attr("checked", flag);
if(flag){$(this).addClass("select");}else{ $(this).removeClass("select");}
});
$(this).siblings().find("input").attr("checked", flag);
$grandpa.children("input").attr("checked", flag);
if(!flag){
if($grandpa.children("div").find("input").hasClass("select")){
$grandpa.children("input").attr("checked", !flag);
}else{
$grandpa.children("input").attr("checked", flag);
}
}
});
$(".permission_son").live("click",function() {
var flag = $(this).attr("checked");
var $father = $(this).parent().siblings("input");
$(this).attr("checked", flag);
$father.attr("checked", flag);
if(flag){$(this).addClass("select"); }else{ $(this).removeClass("select");}
if(!flag){
if(!$(this).siblings().hasClass("select")){
$father.attr("checked", flag);
$father.removeClass("select");
$("#listRolePermission").find("input").each(function(){
if($(this).attr("checked") == flag){
$(this).removeClass("select");
$(this).parentsUntil("#listRolePermission").find(".permission_grandpa").attr("checked",flag);
}
});
}else{
$father.attr("checked", !flag);
$father.addClass("select");
}
}else{
$father.addClass("select");
}
$("#listRolePermission").find("input").each(function(){
if($(this).attr("checked") == true){
$(this).addClass("select");
$(this).parentsUntil("#listRolePermission").find(".permission_grandpa").attr("checked",true);
}
});
});
后台处理代码:
@RequestMapping(params="action=permission")
public ModelAndView permission(HttpServletRequest request) throws Exception {
ModelAndView mav = new ModelAndView(PageView.SYSTEM_ROLE_PERMISSION);
QueryCondition conds = new QueryCondition(new Pager());
DataResult dataResult = new DataResult();
conds.getPager().setPageSize(conds.getPager().getTotalCount());
QueryCondition configConds = new QueryCondition();
DataModelList alllist = roleService.findPermission(configConds);
List<PermissionVO> allListP = alllist.getList();
List<PermissionVO> listSelected =null;
String roleIdString = request.getParameter("roleId");
if(UtilValidate.isNotEmpty(roleIdString)){
QueryCondition selectedConds=new QueryCondition();
selectedConds.put("roleId",roleIdString);
listSelected = roleService.findRolePermission(selectedConds).getList();
dataResult.addObject("roleId",roleIdString);
}
List list = new ArrayList();
//这一块处理的好啊,吴大哥就是厉害啊,就应为这个Map使jsp界面很简洁,很优雅。第一回感觉到map的强大啊
Map<String,String> mapType = new HashMap<String,String>();
mapType.put("系统", "system_");
mapType.put( "***","user_");
mapType.put("---", "club_");
//初始化时,判断是否选中
for(int k=0;k<listSelected.size();k++){
for(int i=0;i<allListP.size();i++){
if(listSelected.get(k).getPermissionId() == allListP.get(i).getPermissionId()){
allListP.get(i).setSelected("selected");
}
}
}
for(Map.Entry<String,String> m: mapType.entrySet()){
Map map = new HashMap();
List itemList = new ArrayList();
for(int i=0;i<allListP.size();i++){
PermissionVO permissionVO=allListP.get(i);
if(UtilValidate.isNotEmpty(permissionVO.getCode()) && permissionVO.getCode().indexOf(m.getValue().toString())==0){
checkPermission(itemList,permissionVO,listSelected);
}
}
map.put("key",m.getKey().toString());
map.put("list", itemList);
list.add(map);
}
dataResult.addObject("items",list);
mav.addObject("result", dataResult);
return mav;
}
//因为里面套着2个层,所以还得有两个list
private boolean checkPermission(List itemList,PermissionVO permissionVO,List<PermissionVO> listSelected){
boolean check = false;
List<PermissionVO> perList = null;
for(int i=0;i<itemList.size();i++){
Map perMap = (Map) itemList.get(i);
perList = (List) perMap.get("list");
if(UtilValidate.isNotEmpty(perList)){
if(permissionVO.getPermissionUnion().equals(((PermissionVO)perList.get(0)).getPermissionUnion())){
check = true;
if(!checkPermissionItem(perList,permissionVO)){
perList.add(permissionVO);
}
}
}
}
if(!check){
perList = new ArrayList();
perList.add(permissionVO);
Map perMap = new HashMap();
perMap.put("list", perList);
perMap.put("key", permissionVO.getPermissionUnion());
perMap.put("name", permissionVO.getPermissionUnionName());
perMap.put("id", permissionVO.getPermissionId());
itemList.add(perMap);
}
return check;
}
private boolean checkPermissionItem(List<PermissionVO> itemList,PermissionVO permissionVO ){
for(int i=0;i<itemList.size();i++){
PermissionVO itemPermissionVO = (PermissionVO)itemList.get(i);
if(permissionVO.getCode().equals(itemPermissionVO.getCode())){
return true;
}
}
return false;
}