jQuery zTree 动态树的构建-优快云博客

本文介绍如何使用zTree实现权限管理功能，包括zTree的安装、页面编辑及后台Action实现等步骤。通过具体实例展示了权限分配流程，并对比了zTree与dTree在效率上的区别。

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

一．下载、安装zTree

zTree下载地址：http://code.google.com/p/jquerytree/downloads/list

这里我下载的是JQuery zTree v3.0。目前最新版是v3.1，一般不建议使用最新版。

下载完成后解压，可以看到其中有三个文件夹和一个更新日志文件。

Css文件夹 zTree的样式和图片存放位置

Demo文件夹存放zTree的一些实例

Js文件夹存放的是所有与zTree相关的js文件。这里min是压缩版，我们在开发的时候建议使用未压缩版的（不含min的）。

开发时建议将这些压缩包统一放在一个文件夹（比如zTree）下，这样，如果需要查看对应的实例，可直接在当前工程下访问并做修改，便于开发使用。当然，开发完成后可以删除demo内容。

二．编辑页面

<%@ page language="java" pageEncoding="UTF-8"%>
<%@taglib uri="/struts-tags" prefix="s"%>
<%@ include file="../common/header.jsp" %>

<!DOCTYPE html>
<HTML>
<HEAD>
	<title>指派权限</title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	
	<link rel="stylesheet" type="text/css" href="${root}/css/dialogStyle.css"/>
	<link rel="stylesheet" href="${root}/js/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
	<link rel="stylesheet" type="text/css" href="${root}/js/jquery/themes/icon.css" />
	<STYLE type="text/css">
		.btn {
			BACKGROUND: url(../images/bt_bg.gif); 
			BORDER-RIGHT: #999999 1px solid; 
			PADDING-RIGHT: 2px; 
			BORDER-TOP: #CCCCCC 1px solid; 
			PADDING-LEFT: 2px; FONT-SIZE: 12px; 
			FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde); 
			BORDER-LEFT: #CCCCCC 1px solid; 
			CURSOR: hand; COLOR: black; 
			PADDING-TOP: 2px; 
			BORDER-BOTTOM: #999999 1px solid;
		}
	</STYLE>
	
	<!-- 
	为提高效率，建议将1.4.4换成1.6.4版
	<script type="text/javascript" src="${root}/js/zTree/js/jquery-1.4.4.min.js"></script>
	 -->
	<script type="text/javascript" src="${root}/js/jquery/jquery-1.6.4.min.js"></script>
	<script type="text/javascript" src="${root}/js/jquery/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="${root}/js/zTree/js/jquery.ztree.core-3.0.js"></script>
	<script type="text/javascript" src="${root}/js/zTree/js/jquery.ztree.excheck-3.0.js"></script>
	<script type="text/javascript" src="${root}/js/winutil.js"></script>

	<!--
	<script type="text/javascript" src="${root}/js/js/jquery.ztree.exedit-3.0.js"></script>
	-->
	<SCRIPT type="text/javascript">
		<!--
		var setting = {
			async: {
				enable: true,//异步处理

				//contentType: "application/json",//提交参数方式，这里 JSON 格式，默认form格式
				
				url: '${root}/sys/listoper.action?roleId=${roleId}',//异步获取json格式数据的路径

				autoParam: ["id","name"]//异步加载时需要提交的参数，多个用逗号分隔
							
			},
			callback: {//回调函数，在这里可做一些回调处理
				//beforeAsync: zTreeBeforeAsync
			},
			check: {//设置 zTree 的节点上是否显示 checkbox / radio ,默认为false
				enable: true
			},
			data: {
				simpleData: {
					/**
					如果设置为 true，请务必设置 setting.data.simpleData 内的其他参数: idKey / pIdKey / rootPId
					并且让数据满足父子关系。*/					
					enable: true,//true / false 分别表示 使用 / 不使用 简单数据模式
					idKey: "id",
					pIdKey: "pId",
					rootPId: 0							
				}
			}
		};

		var zNodes =[];//树节点，json格式，异步加载可设置为null或[]	
		var zTreeObj;//树对象
	 
		$(document).ready(function(){
			
			zTreeObj = $.fn.zTree.init($("#permission_tree"), setting, zNodes);//实例化后直接返回树对象

			//异步提交表单
			$('#permissionform').form({
		        url: '${root}/sys/PermissionManagerole.action',
		        onSubmit: function() {
			        //获取树对象中选中的节点
					var nodes = zTreeObj.getCheckedNodes();
					var s = '';//选中节点ids
					//遍历选中的节点，为s赋值
					for(var i=0; i<nodes.length; i++){
						if (s != '') s += ',';
						s += nodes[i].id;
					}
					document.all("roledto.permissionIds").value = s;
		        },
		        success: function(data) {
			        //操作成功，返回信息
		        	var data = jQuery.parseJSON(data);
		        	if(data.success == false){
		        		alert(data.msg);
		        	}
		          	m_close();  
		        }
		    });
		    
		});

		//-->
	</SCRIPT>
</HEAD>

<BODY οnunlοad="m_close()" style="background-color: #f7f7f7;"> 
	<div style="border: 0px ;width: 100%;height:100%;background-color: #f7f7f7;">
	
		<!-- 树加载后存放的容器 -->
		<ul id="permission_tree" class="ztree" style="border: 0px; background-color: #f7f7f7;"></ul>
		
		<!-- 提交授权操作表单 -->	
		<form id="permissionform" method="post">
			<table>
				<tr>
					<td><input type="hidden" name="roledto.permissionIds" /></td>
					<td><input type="hidden" name="roledto.roleId" value="${roleId}"/></td>
					<td><input type="hidden" name="orgid" value="${orgId}"/></td>
				</tr>
				<tr>
					<td width="100%" align="right">
						<input type="submit" style="width:60px;" class="btn" value="保存"/>&nbsp;
						<input type="button"  style="width:60px;"  class="btn" value="取消" οnclick="m_close()"/>
					</td>
				</tr>
			</table>
		</form>
											
	</div>

</BODY>
</HTML>

三．后台Action

private String id;
	
	private String roleId;
	
	/**
	 * 显示权限栏目树
	 * 这里采用一次加载所有树节点的方式
	 * 当然也可以换成逐级动态加载的方式
	 * @return
	 * @throws IOException
	 */
	@SuppressWarnings("unchecked")
	public String list() throws IOException{
		
		/**
		 * 再次查询时直接返回，这里采用所有节点一次加载的方式
		 * @param id 点击树的节点时传递到后台的属性id
		 */
		if(ValidateUtil.validateString(id)){
			return SUCCESS;
		}
		//根据角色找到对应的操作权限id
		String operationids = this.getOperationIdsByRoleId(roleId);
		//查询所有的权限分类，如系统管理、订单管理、采购管理等等，作为树的一级节点
		List<OperationClass> list =operationClassServiceImpl.getAllOperationClass();
		//存放树节点信息
		List<Map<String,Object>> items = new ArrayList<Map<String,Object>>();
		//当前角色对应的操作
		List<RoleOperation> rolist = this.roleServiceImpl.getRoleOperationByRoleId(roleId);
		
        for(OperationClass node: list){   //第一级遍历，遍历所有的权限分类
        	
        	Map<String,Object> item = new HashMap<String,Object>();   //最外层，父节点        	
            item.put("id", node.getOperationClassId());//id属性  ，数据传递
            item.put("name", node.getClassName()); //name属性，显示节点名称
            item.put("isParent", true);//设置为父节点，这样所有最外层节点都是统一的图标，看起来会舒服些
            //item.put("iconSkin", "diy02");//设置节点的图标皮肤， diy02在zTreeStyle.css中进行设置
            
            /**
             * 如果当前节点（权限分类）有对应的操作（权限），添加操作权限作为该节点的子节点
             */
            if (node.getOperations()!=null&&node.getOperations().size()>0){   
               
                Iterator<Operation> it = node.getOperations().iterator();
                //存放第一层子节点信息
                List<Map<String,Object>> subitems = new ArrayList<Map<String,Object>>();
                
                while(it.hasNext()){//对操作进行遍历
                	
                	Map<String,Object> subitem = new HashMap<String,Object>();//第二层
                	Operation oper = (Operation) it.next();
                	subitem.put("id", oper.getOperationId()+":oper");//id属性  ，数据传递
                	subitem.put("name", oper.getOperationName()); //name属性，显示节点名称
                	
                	/**
                	 * 如果操作中有多个选项，添加选项作为第二层的子节点
                	 */
                	if(oper!=null&&oper.getOptions()!=null){
                		String uoption = "";//有操作权限的操作选项
                		for(RoleOperation ro : rolist){
                			if(ro.getOperation().getOperationId().
                				equals(oper.getOperationId())){//如果当前角色有对应的操作
                				uoption = ro.getOptions();
                			}
                		}
                		String[] suboper = oper.getOptions().split(",");
        				List<Map<String,Object>> items3 = new ArrayList<Map<String,Object>>(); //第三层
        				for(int i=0;i<suboper.length;i++){
        					Map<String,Object> item3 = new HashMap<String,Object>();
        					item3.put("id", "opt:"+oper.getOperationId()+":"+suboper[i]);//id属性  ，数据传递
        					item3.put("name", suboper[i]); //name属性，显示节点名称

        					if(uoption!=null&&!"".equals(uoption)){//如果操作中有操作选项
	    						if(uoption.contains(suboper[i]+",")){//如果当前角色有此操作选项
	    							item3.put("checked", true);//将此选项选中
	    						}
        					}
        					items3.add(item3);//添加到树的第三层
        				}  
        				subitem.put("children", items3);//添加第二层子节点
        				
                	}else{//如果操作没有选项
                		if(operationids.contains(oper.getOperationId())){//当前角色有此操作
	                		subitem.put("checked", true);//将此操作选中
			           	}
                	}
                	subitems.add(subitem);//添加到树的第二层
                }
                item.put("children", subitems);//添加第一层子节点
                
            }  
            items.add(item); //添加到树的第一层  
            
        }
        JSONArray json = JSONArray.fromObject(items);//转成json格式
        jsonString = json.toString();//json格式字符串
        
		return SUCCESS;
	}

四．编后语

公司之前用的jQuery dTree。dTree也是比较好用的，跟zTree的区别不是很大。但有一点比较让人难以忍受，dTree在页面的解析效率比较低。在权限操作这一块儿换成zTree后速度提高了好几倍。

zTree的具体使用已在页面和action模块做了细致的说明，如果对其中的用法比较有疑问可以查看官方的api，中文api地址如下：http://www.baby666.cn/v3/api.php，或者也可以给我留言，我们共同探讨。