权限目录树的实现

最新推荐文章于 2024-07-23 23:18:19 发布

worn.xiao

最新推荐文章于 2024-07-23 23:18:19 发布

阅读量7.1k

点赞数 1

分类专栏：小记/项目实战记录

本文链接：https://blog.csdn.net/worn_xiao/article/details/54881253

版权

小记/项目实战记录专栏收录该内容

14 篇文章 0 订阅

订阅专栏

* 权限模块
1）角色和权限的关系：多对多
2）权限有上下级关系

如上所示是权限，角色与用户的对应关系，

一个用户可以承担多中角色。
一种角色对应多个权限。
一个权限可以被多种角色拥有。
一个权限可能拥有多个子权限。

* 权限对应的是某个功能，功能对应的是请求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>