Jquery zTree演示程序Demo总结

标签： jquery ztree 程序 | 发表时间：2013-10-02 05:45 | 作者：NUPTboyZHB
出处：http://blog.csdn.net
前言：
最近的项目需要用到zTree树，于是想将zTree树总结一下。前段时间一直没有时间总结，趁国庆还有这么点时间，总结一下。zTree树控件是基于Jquery的，官方提供了很好的API文档和Demo

用户可以从如下地址下载：http://www.ztree.me/hunter/zTree.html

1.帮助文档和API
zTree的帮助文档和API都是非常全面的，只是有些Demo的后台是用PHP写的，因此，如果想看更加全面的Demo的话，最好将帮组文档发布到本地的Apache服务器上。
2.用一个Demo来演示Jquery zTree的功能
要点：
2.1 zTree树的数据源为JSON格式
2.2 zTree树控件的信息是通过请求url动态加载的
2.3 zTree树的onClick函数，点击树的任意一个节点后，就会调用
3.Demo演示
3.1 页面布局
为了能较为全面的演示zTree树的功能，布局大致如下，左边是树行结构，右边是主页面。

index.jsp的代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html>
	<head>
		<title>Jquery zTree</title>
		<link rel="stylesheet" type="text/css" href="css/easyui.css">
	    <link rel="stylesheet" type="text/css" href="css/icon.css" />
	    <link rel="stylesheet" type="text/css" href="css/main.css" />
		<link rel="stylesheet" type="text/css" href="zTree/css/zTreeStyle/zTreeStyle.css"/>
		<link rel="stylesheet" type="text/css" href="zTree/css/demo.css"/>
		<script type="text/javascript" src="js/jquery.min.js"></script>
	    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
	    <script type="text/javascript" src="zTree/js/jquery.ztree.all-3.5.js"></script>
		<script type="text/javascript" src="js/index.js"></script>
	</head>
	<body id="main" class="easyui-layout">
		<div data-options="region:'west',split:true" title="Jquery zTree演示" style="width: 180px;  overflow: auto; ">
			<div class="easyui-accordion" data-options="fit:true,border:false">
				<div style="z-index:12754; border: 1px solid lightgray; background: white; width: 150px; height: 35px; display: none; padding: 4px;" id="treeLoadMsg">
					<img src="images/loading.gif" style="vertical-align: middle;" width="32" height="32"/>
					<span>Loading...</span>
				</div>
		        <ul id="treeDemo" class="ztree"></ul>
			</div>
		</div>
		<div data-options="region:'center'" title="main" style="overflow: hidden;">
			<iframe id="iframepage" src="default.jsp" style=" background: white;border: 1px; width: 100%; height: 100%; padding: 0;"></iframe>
		</div>
	</body>
</html>

为了不污染原有的静态页面，我们将index.jsp文件封装在index.js文件中，代码如下：（注意注释） 

/**
 * 设置zTree树
 */
var setting = {
	async: {
		enable: true,
		url: getUrlByNodeId
	},
	check: {
		enable: false
	},
	data: {
		simpleData: {
			enable: true
		}
	},
	view: {
		expandSpeed: ""
	},
	callback: {
		beforeExpand: beforeExpand,
		onAsyncSuccess: onAsyncSuccess,
		onAsyncError: onAsyncError,
		onClick: zTreeOnClick
	}
};
var zNodes =[
	{name:"经典视频检索", id:"1",isParent:true,iconOpen:"zTree/css/zTreeStyle/img/diy/1_open.png", iconClose:"zTree/css/zTreeStyle/img/diy/1_close.png"},
	{name:"基于内容检索", id:"2",isParent:true,iconOpen:"zTree/css/zTreeStyle/img/diy/1_open.png", iconClose:"zTree/css/zTreeStyle/img/diy/1_close.png"},
	{name:"基于语义检索", id:"3",isParent:true,iconOpen:"zTree/css/zTreeStyle/img/diy/1_open.png", iconClose:"zTree/css/zTreeStyle/img/diy/1_close.png"}
];
/**
 * @author ZhengHaibo
 * 功能：通过NodeId获得节点的孩子节点
 * 调用：当父节点展开时，调用，返回该父节点的子节点
 * 后台数据格式：JSON
 * @param treeId 树控件的Id
 * @param treeNode 树节点对象：包含Id等信息
 * @return
 */
function getUrlByNodeId(treeId, treeNode) {
	return "getNodesDataById?treeNodeId="+treeNode.id;
}
/**
 * 展开之前执行的函数
 * @param treeId
 * @param treeNode
 * @return
 */
function beforeExpand(treeId, treeNode) {
	if (!treeNode.isAjaxing) {
		ajaxGetNodes(treeNode, "refresh");
		return true;
	} else {
		alert("Loading...");
		return false;
	}
}
/**
 * 加载成功后执行的函数
 * @param event 封装了js的事件
 * @param treeId 树控件的Id
 * @param treeNode 树节点对象
 * @param msg 返回的JSON格式的消息
 * @return
 */
function onAsyncSuccess(event, treeId, treeNode, msg) {
    console.log("treeId");
    console.log(treeId);
    console.log("treeNode");
    console.log(treeNode);
    console.log("msg");
    console.log(msg);
	if (!msg || msg.length == 0) {
		return;
	}
	var zTree = $.fn.zTree.getZTreeObj("treeDemo");
	treeNode.icon = "";
	zTree.updateNode(treeNode);//更新树结构
	zTree.selectNode(treeNode.children[0]);//设置为第一个子节点为选中状态
}
function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
	var zTree = $.fn.zTree.getZTreeObj("treeDemo");
	alert("Error ! 异步获取数据异常");
	treeNode.icon = "";
	zTree.updateNode(treeNode);
}
function ajaxGetNodes(treeNode, reloadType) {
	var zTree = $.fn.zTree.getZTreeObj("treeDemo");
	if (reloadType == "refresh") {
		treeNode.icon = "zTree/css/zTreeStyle/img/loading.gif";
		zTree.updateNode(treeNode);
	}
	zTree.reAsyncChildNodes(treeNode, reloadType, true);
}
/**
 * 功能：当点击树节点时，调用该函数
 * @param event
 * @param treeId
 * @param treeNode
 * @return
 */
function zTreeOnClick(event, treeId, treeNode) {
    console.log("zTreeOnClickLog:--------------------------------")
    console.log(treeId);
    console.log(treeNode);
    console.log(treeNode.id);
    switch(treeNode.id+""){//根据树节点的Id判断
    case "1":
    case "11":
    	document.getElementById("iframepage").src="tree_click_page.jsp?treeNodeId="+treeNode.id;
    	break;
    case "12":
    	document.getElementById("iframepage").src="tree_click_page.jsp?treeNodeId="+treeNode.id;
    	break;
    case "13":
    	document.getElementById("iframepage").src="tree_click_page.jsp?treeNodeId="+treeNode.id;
    	break;
    case "2":
    case "21":
    	document.getElementById("iframepage").src="tree_click_page.jsp?treeNodeId="+treeNode.id;
    	break;
    case "22":
    	document.getElementById("iframepage").src="tree_click_page.jsp?treeNodeId="+treeNode.id;
    	break;
    case "23":
    	document.getElementById("iframepage").src="tree_click_page.jsp?treeNodeId="+treeNode.id;
    	break;
    case "24":
    	document.getElementById("iframepage").src="tree_click_page.jsp?treeNodeId="+treeNode.id;
    	break;
    case "3":
    case "31":
    	document.getElementById("iframepage").src="tree_click_page.jsp?treeNodeId="+treeNode.id;
    	break;
    }
}
$(document).ready(function(){
	$.fn.zTree.init($("#treeDemo"), setting, zNodes);//初始化zTree树
});

3.2后台
后台用的是Struts2框架，在struts.xml文件中设置好Action，根据前台节点的不同id号返回不同JSON格式的数据 

/*
 * $filename: ZTreeDemoAction.java,v $
 * $Date: Sep 27, 2013  $
 * Copyright (C) ZhengHaibo, Inc. All rights reserved.
 * This software is Made by Zhenghaibo.
 */
package edu.njupt.zhb.ztree.action;

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.ServletActionContext;
import com.opensymphony.xwork2.ActionSupport;


/*
 *@author: ZhengHaibo  
 *web:     http://blog.csdn.net/nuptboyzhb
 *mail:    [email protected]
 *Sep 27, 2013  Nanjing,njupt,China
 */
public class ZTreeDemoAction extends ActionSupport{
	/**
	 * 
	 */
	private static final long serialVersionUID = -3318989776253565435L;
    
	private int treeNodeId;//保存树节点的Id
	/**
	 * 返回树的根节点的Json格式数据
	 * @return
	 */
	public String getNodesDataById(){
		System.out.println("treeNodeId = "+treeNodeId);
		String iconPath = ",icon:\"zTree/css/zTreeStyle/img/diy/3.png\"";
		String icon2Path = ",icon:\"zTree/css/zTreeStyle/img/diy/2.png\"";
		String icon9Path = ",icon:\"zTree/css/zTreeStyle/img/diy/9.png\"";
		String lookIconPath = ",icon:\"zTree/css/zTreeStyle/img/diy/8.png\"";
		String nodesJson = "";
		if (treeNodeId == 1) {
			nodesJson = "[{id:11, pId:"+treeNodeId+", name: \"综合检索\",isParent:false"+iconPath+"}," +
            "{id:12, pId:"+treeNodeId+", name: \"视频时间\",isParent:false"+iconPath+"}," +
            "{id:13, pId:"+treeNodeId+", name: \"视频地点\",isParent:false"+iconPath+"}" +
            "]";
		}else if(treeNodeId == 2) {
			nodesJson = "[{id:21, pId:"+treeNodeId+", name: \"生成索引\",isParent:false"+icon2Path+"}," +
            "{id:22, pId:"+treeNodeId+", name: \"上传图像\",isParent:false"+iconPath+"}," +
            "{id:23, pId:"+treeNodeId+", name: \"图像URL\",isParent:false"+iconPath+"}," +
            "{id:24, pId:"+treeNodeId+", name: \"查看索引\",isParent:false"+lookIconPath+"}" +
            "]";
		}else if (treeNodeId == 3) {
			nodesJson = "[{id:31, pId:"+treeNodeId+", name: \"语义检索\",isParent:false"+icon9Path+"}]";
		}else{
			nodesJson = "[]";//其他情况：父节点没有子节点
		}
		getPrintWriter().write(nodesJson);
		return SUCCESS;
	}
	
	/**
	 * 获得HttpServletResponse对象
	 * @return
	 */
	public static HttpServletResponse getResponse() {
		HttpServletResponse response = ServletActionContext.getResponse();
		response.setContentType("text/html;charset=UTF-8");
		return response;
	}
	
	public PrintWriter getPrintWriter() {
		PrintWriter pw = null;
		try {
			pw = getResponse().getWriter();
		} catch (IOException e) {
			e.printStackTrace();
		}
		return pw;
	}

	public int getTreeNodeId() {
		return treeNodeId;
	}

	public void setTreeNodeId(int treeNodeId) {
		this.treeNodeId = treeNodeId;
	}
}

4.页面效果


项目源代码： http://download.csdn.net/detail/nuptboyzhb/6347025


未经允许不得用户商业目的

作者：NUPTboyZHB 发表于2013-10-1 21:45:49 原文链接
阅读：104 评论：0 查看评论

相关 [jquery ztree 程序] 推荐：

Jquery zTree演示程序Demo总结

- - CSDN博客Web前端推荐文章
最近的项目需要用到zTree树，于是想将zTree树总结一下. 前段时间一直没有时间总结，趁国庆还有这么点时间，总结一下. zTree树控件是基于Jquery的，官方提供了很好的API文档和Demo. 用户可以从如下地址下载：http://www.ztree.me/hunter/zTree.html.

zTree v2.6.03 发布，JQuery Tree插件

- pathfinder - ITeye资讯频道
JQuery Tree插件zTree v2.6.03 发布了. zTree 是利用 JQuery 的核心代码，实现一套能完成大部分常用功能的 Tree 插件. 该版本修正了一些重要的bug：. 【修正】使用自定义图标功能时，异步加载无法切换为loading图标的bug. 【修正】loading 图标定义中的1像素差异，否则会导致高级异步加载中loading跳动（更新 zTreeStyle.css 和 bigDataDemo_super.html）.

利用 Jquery Deferred 异步你的程序

- - ITeye博客
最近在做公司QA系统改造时,有这样的一个场景.. JIRA平台(一个国外项目与事务跟踪工具)中获取,JIRA平台提供了很完善的Rest API.. 现在的要求是,在QA系统中提交项目时,必须先从JIRA平台获取很多的数据项,每次请求的Rest API都不一样,. 同时必须等所有请求都成功返回数据后才能提交项目..

程序员都会的 35 个 jQuery 小技巧

- - 外刊IT评论
收集的35个 jQuery 小技巧/代码片段，可以帮你快速开发.. 注: 在版本jQuery 1.4中，$.support 替换掉了$.browser 变量. This piece of code will prevent the loading of all images, which can be useful if you have a site with lots of images..

JQuery 选择器

- - CSDN博客Web前端推荐文章
}

点击我

.    像上面这样把JavaSript代码和HTML代码混杂在一起的做法同样也非常不妥，因为它并没有将网页内容和行为分离，所以才有JQuery选择器的学习.

点击我

. //给class为demo的元素添加行为.

jquery操作xml

- - CSDN博客Web前端推荐文章
jquery真的很强大，虽然一直在用jquery，不用一直都没有深入，这几天重新学习了一下，不得不感叹她的强大，已经让我深深入迷. 这里记录一下，她是怎么快速地操作xml的.. 这里我们有一个xml文件：. jquery如何操作呢,总的思想，就是和操作dom差不多的方法. 首先我们获取这个文件的内容：（我先引入jquery库哈）.

jQuery JSONP跨域

- - Web前端 - ITeye博客
基于Jquery的Ajax跨域访问. 单点登录服务器(sso服务器). 登录网页项目的时候，由于使用了单点登录，所以页面会跳转到sso服务器，进行统一登录，. 现在需要在该界面增加令牌的认证，但是SSO服务器和令牌服务器部署在不同的服务器，且暂时没有要合并的可能，所以在SSO登录的时候必须要对令牌进行验证，就必须涉及到了跨域访问的问题.

jquery 插件

- - JavaScript - Web前端 - ITeye博客
 jQuery插件的开发包括两种：. 一种是类级别的插件开发，即给jQuery添加新的全局函数，相当于给jQuery类本身添加方法. jQuery的全局函数就是属于jQuery命名空间的函数，另一种是对象级别的插件开发，即给jQuery对象添加方法. 下面就两种函数的开发做详细的说明. 1 、类级别的插件开发.

让jquery更快

- - JavaScript - Web前端 - ITeye博客
很久没有关注jQuery了，最近重新看了一下，看到一些不错的文章，转来坐一下笔记. 其内容和一些新提供的方法还是很多有值得学习的地方. 使用最新版本的jQuery. jQuery的版本更新很快，你应该总是使用最新的版本. 因为新版本会改进性能，还有很多新功能. 下面就来看看，不同版本的jQuery性能差异有多大.

jQuery Tools：Web开发必备的 jQuery UI 库

- - 博客园_首页
jQuery Tools 是基于. jQuery 开发的网站界面库，包含网站最常用的Tabs（选项卡）、Tooltip（信息提示）、Overlay（遮罩、弹窗）、Scrollable（滚动控制）、Form Validator（表单验证）、Rangeinput（范围选择）、Dateinput（日期选择）等众多功能.