如上所示是权限，角色与用户的对应关系，
一个用户可以承担多中角色。一种角色对应多个权限。一个权限可以被多种角色拥有。一个权限可能拥有多个子权限。 * 权限对应的是某个功能，功能对应的是请求URL * 设计权限实体 * 开发权限模块步骤 1）设计权限实体并编写hbm映射文件生成表 2）通过一个SQL脚本导入权限数据 3）为角色分配权限 4）使用jQuery的treeview插件展示权限树 * 导入插件所需资源 <script language="javascript" src="${pageContext.request.contextPath}/script/jquery.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath }/script/jquery_treeview/jquery.treeview.js"></script> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/script/jquery_treeview/jquery.treeview.css"> <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/style/blue/file.css" /> * 通过ul和li标签展示数据* 调用插件的treeview方法生成树
5）权限树的选中效果 当选中某个权限时，同时选中其下级权限，当取消某个权限时，同时取消其下级权限 $(this).siblings('ul').find('input').attr('checked',this.checked); 当选中某个权限时，同时选中其直接上级权限 $(this).parents('li').children('input').attr('checked',true); 当取消某个权限时，如果同级权限都没有选中，则取消其上级权限 var size = $(this).parent('li').siblings('li').children('input:checked').size(); if(size == 0){ $(this).parent().parent().siblings('input').attr('checked',false);
}
例子:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <%@ taglib prefix="s" uri="/struts-tags" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>配置权限</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script language="javascript" src="${pageContext.request.contextPath}/script/jquery.js"></script> <script language="javascript" src="${pageContext.request.contextPath}/script/pageCommon.js" charset="utf-8"></script> <script language="javascript" src="${pageContext.request.contextPath}/script/PageUtils.js" charset="utf-8"></script> <script language="javascript" src="${pageContext.request.contextPath}/script/DemoData.js" charset="utf-8"></script> <script language="javascript" src="${pageContext.request.contextPath}/script/DataShowManager.js" charset="utf-8"></script> <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/style/blue/pageCommon.css" /> <script language="javascript" src="${pageContext.request.contextPath}/script/jquery_treeview/jquery.treeview.js"></script> <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/style/blue/file.css" /> <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/script/jquery_treeview/jquery.treeview.css" /> <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/style/blue/file.css" /> <script type="text/javascript"> $(function(){ $('input[name=pre_id]').click(function(){ //选择当前权限的ul列表下的所有input标签 $(this).siblings('ul').find('input').attr('checked',this.checked); //当选中某个权限时 同时选中其直接上级权限 if(checked){ $(this).parents('li').children('input').attr('checke',true); //如果同级权限中没有被选中的，择取消上级的选中权限 }else{ var size=$(this).parent('li').siblings('li').children('input:checked').size(); if(size==0){ //取消其上级元素 $(this).parent().parent().sibling('input').attr('checked',false); } } }); }); </script> </head> <body> <!-- 标题显示 --> <div id="Title_bar"> <div id="Title_bar_Head"> <div id="Title_Head"></div> <div id="Title"><!--页面标题--> <img border="0" width="13" height="13" src="${pageContext.request.contextPath}/style/images/title_arrow.gif"/> 配置权限 </div> <div id="Title_End"></div> </div> </div> <!--显示表单内容--> <div id=MainArea> <s:form action="role_setpre.action" namespace="/" method="post"> <s:hidden name="id"></s:hidden> <div class="ItemBlock_Title1"><!-- 信息说明 --><div class="ItemBlock_Title1"> <img border="0" width="4" height="7" src="${pageContext.request.contextPath}/style/blue/images/item_point.gif" /> 正在为【${name}】配置权限 </div> </div> <!-- 表单内容显示 --> <div class="ItemBlockBorder"> <div class="ItemBlock"> <table cellpadding="0" cellspacing="0" class="mainForm"> <!--表头--> <thead> <tr align="LEFT" valign="MIDDLE" id="TableTitle"> <td width="300px" style="padding-left: 7px;"> <!-- 如果把全选元素的id指定为selectAll，并且有函数selectAll()，就会有错。因为有一种用法：可以直接用id引用元素 --> <input type="CHECKBOX" id="cbSelectAll" onClick="$('input[name=pre_id]').attr('checked',this.checked)"/> <label for="cbSelectAll">全选</label> </td> </tr> </thead> <!--显示数据列表--> <tbody id="TableData"> <tr class="TableDetail1"> <!-- 显示权限树 --> <td> <ul id="tree"> <s:iterator value="pre_list"> <input id="cb_${id}" <s:property name="id in pre_list?'checked':''"/> value="${id}" type="checkbox" name="pre_id"/> <label for='cb_${id}'><span class='folder' id='${id}'>${name}</span></label> <li> <s:iterator value="children"> <input id="cb_${id}" <s:property name="id in pre_list?'checked':''"/> value="${id}" type="checkbox" name="pre_id" />${name} <ul> <s:iterator value="children"> <li> <input id="cb_${id}" <s:property name="id in pre_list?'checked':''"/> value="${id}" type="checkbox" name="pre_id" />${name} </li> </s:iterator> </ul> </s:iterator> </li> </s:iterator> </ul> </br> </td> </tr> </tbody> </table> </div> </div> <!-- 表单操作 --> <div id="InputDetailBar"> <input type="image" src="${pageContext.request.contextPath}/style/images/save.png"/> <a href="javascript:history.go(-1);"><img src="${pageContext.request.contextPath}/style/images/goBack.png"/></a> </div> </s:form> </div> <div class="Description"> 说明：<br /> 1，选中一个权限时：<br /> a，应该选中 他的所有直系上级。<br /> b，应该选中他的所有直系下级。<br /> 2，取消选择一个权限时：<br /> a，应该取消选择 他的所有直系下级。<br /> b，如果同级的权限都是未选择状态，就应该取消选中他的直接上级，并递归向上做这个操作。<br /> 3，全选/取消全选。<br /> 4，默认选中当前岗位已有的权限。<br /> </div> <script type="text/javascript"> $("#tree").treeview(); </script> </body> </html>
