OA项目实战学习（8）——配置权限的树形结构显示

最新推荐文章于 2025-03-21 11:44:28 发布

原创最新推荐文章于 2025-03-21 11:44:28 发布 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#树形结构显示 #分配权限

OA项目实战专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种在Struts2框架中实现权限管理的方法，包括通过修改模板使权限选项换行显示，直接使用HTML代码实现，以及利用JQuery Tree控件创建树形结构展示权限。文中还详细介绍了如何通过JavaScript实现树节点之间的联动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

改模板使每个权限换行显示：

找到<s:checkboxlist />标签所使用的模板

将模板复制到自己的工程目录并修改

运行效果：

直接写HTML实现换行：

setPrivilegeUI.jsp

<!--显示数据列表-->
<tbody id="TableData">
	<tr class="TableDetail1">
		<!-- //TODO:显示权限树 -->
		<td>
			<%-- <s:checkboxlist name="privilegeIds" list="#privilegeList" listKey="id" listValue="name" /> --%>
			
			
			<s:iterator value="#privilegeList">
				<input type="checkbox" name="privilegeIds" value="${id}" id="cb_${id}"
					<s:property value="%{id in privilegeIds} ? 'checked' : ''"/> 
				>
				<!--<label> 标签的 for 属性应当与相关元素的 id 属性相同  -->
				<label for="cb_${id}">${name}</label>
				<br/>
			</s:iterator>
		</td>
	</tr>
</tbody>

使用JQuery_Tree控件实现树形结构：

1、项目中导入tree控件所需文件。

2、引入js脚本文件与css文件

setPrivilegeUI.jsp

    <script language="javascript" src="${pageContext.request.contextPath}/script/jquery_treeview/jquery.treeview.js"></script>
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/script/jquery_treeview/jquery.treeview.css">

3、实现树形结构：

setPrivilegeUI.jsp

<!-- 表单内容显示 -->
<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="$('[name=privilegeIds]').attr('checked', this.checked)" /> <label for="cbSelectAll">全选</label>
					</td>
				</tr>
			</thead>

			<!--显示数据列表-->
			<tbody id="TableData">
				<tr class="TableDetail1">
					<!-- //TODO:显示权限树 -->
					<td>
						<%-- <s:checkboxlist name="privilegeIds" list="#privilegeList" listKey="id" listValue="name" /> --%>

						<%--- 
					<s:iterator value="#privilegeList">
						<input type="checkbox" name="privilegeIds" value="${id}" id="cb_${id}"
							<s:property value="%{id in privilegeIds} ? 'checked' : ''"/> 
						>
						<!--<label> 标签的 for 属性应当与相关元素的 id 属性相同  -->
						<label for="cb_${id}">${name}</label>
						<br/>
					</s:iterator>
					--%>

						<ul id="root">
							<%-- 第一级 --%>
							<s:iterator value="#topPrivilegeList">
								<li><input type="checkbox" name="privilegeIds"
									value="${id}" id="cb_${id}"
									<s:property value="%{id in privilegeIds ? 'checked' : ''}"/>>
									<label for="cb_${id}"><span class="folder">${name}</span>
								</label>
									<ul>
										<%-- 第二级 --%>
										<s:iterator value="children">
											<li><input type="checkbox" name="privilegeIds"
												value="${id}" id="cb_${id}"
												<s:property value="%{id in privilegeIds ? 'checked' : ''}"/>>
												<label for="cb_${id}"><span class="folder">${name}</span>
											</label>
												<ul>
													<%-- 第三级 --%>
													<s:iterator value="children">
														<li><input type="checkbox" name="privilegeIds"
															value="${id}" id="cb_${id}"
															<s:property value="%{id in privilegeIds ? 'checked' : ''}"/>>
															<label for="cb_${id}"><span class="folder">${name}</span>
														</label>
														</li>
													</s:iterator>
												</ul>
											</li>
										</s:iterator>
									</ul>
								</li>
							</s:iterator>
						</ul>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>
<script type="text/javascript">
	$("#root").treeview();
</script>

运行效果：

4、动态中效果：

<script type="text/javascript">
	$(function() {
		// 给所有的权限复选框添加事件
		$("[name=privilegeIds]").click(
				function() {

					// 自己选中或取消时，把所有的下级权限也都同时选中或取消
					$(this).siblings("ul").find("input").attr("checked",
							this.checked);

					// 当选中一个权限时，也要同时选中所有的直系上级权限
					if (this.checked) {
						$(this).parents("li").children("input").attr("checked",
								true);
					}
					// 当取消一个权限时，同级没有选中的权限了，就也取消他的上级权限，再向上也这样做。
					else {
						if ($(this).parent().siblings("li").children(
								"input:checked").size() == 0) {
							$(this).parent().parent().siblings("input").attr(
									"checked", false);

							var start = $(this).parent().parent();
							if (start.parent().siblings("li").children(
									"input:checked").size() == 0) {
								start.parent().parent().siblings("input").attr(
										"checked", false);
							}
						}
					}
				});

	});
</script>

运行效果：