OA项目中权限树状结构的实现

    最近在做OA项目设置权限的时候用到JQuery的TreeView插件，现在整理下：
    1、 首先准备一下Action中的setPrivilegeUI()方法

	/** 设置权限页面 */
	public String setPrivilegeUI() {
		// 准备数据
		Role role = roleService.getById(model.getId());
		ActionContext.getContext().getValueStack().push(role);

		List<Privilege> topPrivilegeList = privilegeService.findTopList(); 
		ActionContext.getContext().put("topPrivilegeList", topPrivilegeList);

		// 准备回显的数据
		privilegeIds = new Long[role.getPrivileges().size()];
		int index = 0;
		for (Privilege privilege : role.getPrivileges()) {
			privilegeIds[index++] = privilege.getId();
		}

		return "setPrivilegeUI";
	}

       2、在网页中准备接收数据

    

<!-- 用于满足JQuery的treeview()方法-->
<ul id="tree">
  <!-- 遍历顶级权限-->
<s:iterator value="#topPrivilegeList">
            <!-- name="privilegeIds" 用于回显 span class="folder"用于显示文件夹状 value="%{id in privilegeIds ? 'checked' : ''}" 如果id 在action准备回显的权限id中则选中-->
	<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>

     3、JS实现树状结构以及上下级权限的选中相关操作的代码

    

<script type="text/javascript">
		$(function(){
			// 为所有的权限复选框指定事件处理代码
			$("[name=privilegeIds]").click(function(){
				var checked = this.checked; // 当前触发事件的复选框的选中状态
				
				// 同时选中或取消所有下级权限
				$(this).siblings("ul").find("input").attr("checked", checked);
				
				// 如果当前是选中，则也选中所有上级权限
				if(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 startPoint = $(this).parent().parent();
						if( startPoint.parent().siblings("li").children("input:checked").size() == 0 ){
							startPoint.parent().parent().siblings("input").attr("checked", false);
						}
					}
				}	
			});
			
			$("#tree").treeview();
		});
	</script>

    4、点击文字实现的小技巧

      

<!-- label标签中的for属性 要跟文字对应的id一样-->
<label for="cb_${id}">

   5、实现当鼠标经过文件夹图标时 鼠标的图标显示为手型

   

<style type="text/css">
		span.folder{
			cursor: pointer;
		}
	</style>

 

  

    这样我们权限树的操作就完成了！