`

jQuery之Ztree

jQueryztree 
阅读更多
参考资料
1 spring+struts2+hibernate+json+dtree实现的无限级联树
http://luanmad-java.iteye.com/blog/459960
特别说明：数据库使用了以上这篇文章的表及相关数据
环境：XP+Oracle10i+Myeclipse6.6+JDK1.6
Ztree版本：3.0
工程图片如下：

运行效果如下：

一 前台代码如下：(tree.jsp) 
<%@ page language="java" pageEncoding="GBK"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<HTML>
<HEAD>
   <base href="<%=basePath%>">
	<TITLE> ZTREE DEMO - Async</TITLE>
	<meta http-equiv="content-type" content="text/html; charset=GBK">
	<link rel="stylesheet" href="css/demo.css" type="text/css">
	<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">
	<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="js/jquery.ztree.core-3.0.js"></script>	
	<SCRIPT LANGUAGE="JavaScript">
		<!--
		var setting = {
			async: {
				enable: true,
				url:"treeNode",
				autoParam:["id", "name=n","url"],
				expandSpeed:false,				
				dataFilter: filter
			},
			callback: {
			    onClick: onClick,
				beforeAsync: beforeAsync,
				onCollapse: onCollapse,
				onExpand: onExpand
			}
		};
		
		function getTime() {
			var now= new Date(),
			h=now.getHours(),
			m=now.getMinutes(),
			s=now.getSeconds(),
			ms=now.getMilliseconds();
			return (h+":"+m+":"+s+ " " +ms);
		}
		
		function onCollapse(event, treeId, treeNode) {
			//alert("onCollapse: " + treeId + "," + treeNode.name + "," + treeNode.id+ "," + treeNode.url);
		}		
		
		function onExpand(event, treeId, treeNode) {
			//alert("onExpand: " + treeId + "," + treeNode.name+ "," + treeNode.id+ "," + treeNode.url);
		}
		
		function onClick(event, treeId, treeNode, clickFlag) {
			//alert("onClick: " + treeId + "," + treeNode.name + "," + clickFlag+ "," + treeNode.id+ "," + treeNode.url);
		}		

		function filter(treeId, parentNode, childNodes) {
			if (!childNodes) return null;
			for (var i=0, l=childNodes.length; i<l; i++) {
				childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
			}
			return childNodes;
		}
		function beforeAsync(treeId, treeNode) {
			return treeNode ? treeNode.level < 5 : true;
		}

		$(document).ready(function(){
			$.fn.zTree.init($("#treeDemo"), setting);
		});
		//-->
	</SCRIPT>
</HEAD>

<BODY>
<div class="content_wrap" >
	<div class="zTreeDemoBackground left">
		<ul id="treeDemo" class="ztree"></ul>
	</div>	
</div>
</BODY>
</HTML>

二 后台代码如下：
1 TreeNodeServlet.java 
package net.liuzd.tree.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.liuzd.util.StringUtils;
import net.liuzd.util.UtilCommon;

public class TreeNodeServlet extends HttpServlet {
	
	private static final long serialVersionUID = 1L;

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doPost(request,response);
		
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			 {
		String pId = request.getParameter("id");
		String pName =  StringUtils.chineseStrUTF8(request.getParameter("n"));	
		System.out.println("PID: " + pId + ",pName: " + pName);
		// 构造数据，可以从数据库中查询
		String str = null;		
		if (pId == null) {			
			pId = "0";	
		} 		
		str = UtilCommon.getChild(pId);		
		try {
			reponse(request, response, str);
		} catch (Exception e) {
			e.printStackTrace();
		}
		

	}
	
	public void reponse(HttpServletRequest request,
			HttpServletResponse response, Object msg) throws Exception {
		response.setContentType("text/plain");
		response.setCharacterEncoding("UTF-8");
		PrintWriter out = response.getWriter();
		out.write(msg.toString());
		out.flush();
		out.close();
	}
}

2 树菜单类(BaseTreeNode.java) 
package net.liuzd.tree;

import java.io.Serializable;

import org.apache.commons.lang.builder.ToStringBuilder;

public class BaseTreeNode implements Serializable {

	
	private static final long serialVersionUID = 1L;
	/**定义树控件公共属性*/
	
	/**树控件ID*/
	protected String treeId;
	/**树控件的名称*/
	protected String treeName;
	/**树控件的父ID*/
	protected String parentId;	
	/**是否为父项,或者说是否有子项*/
	protected boolean isParent;
	/**控件标题*/
	protected String treeTitle;
	
	public String getTreeId() {
		return treeId;
	}
	public BaseTreeNode setTreeId(String treeId) {
		this.treeId = treeId;
		return this;
	}
	public String getTreeName() {
		return treeName;
	}
	public void setTreeName(String treeName) {
		this.treeName = treeName;
	}
	public String getParentId() {
		return parentId;
	}
	public void setParentId(String parentId) {
		this.parentId = parentId;
	}
	
	
	public boolean isParent() {
		return isParent;
	}
	public void setParent(boolean isParent) {
		this.isParent = isParent;
	}
	public String getTreeTitle() {
		return treeTitle;
	}
	public void setTreeTitle(String treeTitle) {
		this.treeTitle = treeTitle;
	}
	
	public BaseTreeNode() {
		
	}
	
	public BaseTreeNode(String treeId, String treeName, String parentId,boolean isParent) {		
		this.treeId = treeId;
		this.treeName = treeName;
		this.parentId = parentId;				
		this.isParent = isParent;
	}	
	
	
	public BaseTreeNode(String treeId, String treeName, String parentId,boolean isHasChild,String treeTitle) {
		this(treeId,treeName,parentId,isHasChild);	
		this.treeTitle = treeTitle;
		
	}	
	
	@Override
	public String toString() {
		return ToStringBuilder.reflectionToString(this);
	}
}

3 DAO(TreeDAO.java) 
package net.liuzd.tree.dao;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import net.liuzd.tree.BaseTreeNode;

public class TreeDAO implements ITree {

	public void add(BaseTreeNode tree) {

	}

	public void del(BaseTreeNode tree) {

	}

	public BaseTreeNode get(BaseTreeNode tree) {

		BaseTreeNode bean = null;

		Connection conn = null;
		PreparedStatement ps = null;
		ResultSet rs = null;

		try {
			String treeId = tree.getTreeId();
			String sql = "select * from TREENODES where ID=?";
			conn = ConnectionUtils.getConnection();
			ps = conn.prepareStatement(sql);
			ps.setString(1, treeId);
			rs = ps.executeQuery();
			while (rs.next()) {
				bean = new BaseTreeNode(rs.getString("ID"), rs
						.getString("NAME"), rs
						.getString("PID"), isExpand(new BaseTreeNode().setTreeId(treeId)));
			}
			return bean;
		} catch (SQLException e) {
			throw new RuntimeException(e.getMessage(), e);
		} finally {
			try {
				if (null != rs) {
					rs.close();
					rs = null;
				}
				if (null != ps) {
					ps.close();
					ps = null;
				}
				if (null != conn) {
					conn.close();
					conn = null;
				}
			} catch (SQLException e) {
				throw new RuntimeException("关闭数据库连接出错..." + e.getMessage(), e);
			}
		}

	}

	public List<BaseTreeNode> getChildTree(BaseTreeNode tree) {
		Connection conn = null;
		PreparedStatement ps = null;
		ResultSet rs = null;
		List<BaseTreeNode> children = new ArrayList<BaseTreeNode>();
		try {
			String treeId = tree.getTreeId();
			String sql = "select * from TREENODES where PID=?";
			conn = ConnectionUtils.getConnection();
			ps = conn.prepareStatement(sql);
			ps.setString(1, treeId);
			rs = ps.executeQuery();
			while (rs.next()) {
				treeId = rs.getString("ID");
				children.add(new BaseTreeNode(treeId, rs
						.getString("NAME"), rs
						.getString("PID"), isExpand(new BaseTreeNode().setTreeId(treeId))));
			}
			return children;
		} catch (SQLException e) {
			throw new RuntimeException(e.getMessage(), e);
		} finally {
			try {
				if (null != rs) {
					rs.close();
					rs = null;
				}
				if (null != ps) {
					ps.close();
					ps = null;
				}
				if (null != conn) {
					conn.close();
					conn = null;
				}
			} catch (SQLException e) {
				throw new RuntimeException("关闭数据库连接出错..." + e.getMessage(), e);
			}
		}
	}

	public void update(BaseTreeNode tree) {

	}

	public boolean isExpand(BaseTreeNode tree) {
		Connection conn = null;
		PreparedStatement ps = null;
		ResultSet rs = null;
		try {
			String treeId = tree.getTreeId();
			String sql = "select count(1) counts from TREENODES where PID=?";
			conn = ConnectionUtils.getConnection();
			ps = conn.prepareStatement(sql);
			ps.setString(1, treeId);
			rs = ps.executeQuery();
			int counts = 0;
			while (rs.next()) {
				counts = rs.getInt(1);
			}
			return counts > 0;
		} catch (SQLException e) {
			throw new RuntimeException(e.getMessage(), e);
		} finally {
			try {
				if (null != rs) {
					rs.close();
					rs = null;
				}
				if (null != ps) {
					ps.close();
					ps = null;
				}
				if (null != conn) {
					conn.close();
					conn = null;
				}
			} catch (SQLException e) {
				throw new RuntimeException("关闭数据库连接出错..." + e.getMessage(), e);
			}
		}
	}
}

4 工具类(UtilCommon.java) 
package net.liuzd.util;

import java.util.List;

import net.liuzd.tree.BaseTreeNode;
import net.liuzd.tree.dao.ITree;
import net.liuzd.tree.dao.TreeDAO;

public class UtilCommon {
	
	public static String getRoot(String treeId) {
		String s = "";
		ITree treeDao = new TreeDAO();
		BaseTreeNode node = treeDao.get(new BaseTreeNode().setTreeId(treeId));
		s = "[";
		s += "{\"id\":\"" + node.getTreeId() + "\",\"name\":\"" + node.getTreeName()
						+ "\",\"isParent\":" + node.isParent()+ "}";			
		s = s.substring(0, s.length() - 1);
		s += "]";			
		return s;
	}
	
	public static String getChild(String treeId) {		
		String s = "[";
		ITree treeDao = new TreeDAO();
		List<BaseTreeNode> children = treeDao.getChildTree(new BaseTreeNode().setTreeId(treeId));
		for (BaseTreeNode node : children) {
			s += "{\"id\":\"" + node.getTreeId() + "\",\"name\":\"" + node.getTreeName()
			+ "\",\"isParent\":" + node.isParent()+ "},";
		}
		s = s.substring(0, s.length() - 1);
		s += "]";		
		return s;
	}

	public static void main(String[] args) {
		System.out.println(getRoot("513400000000"));
	}
}

5 数据库文件(oracle)
A 创建表数据 
create table TREENODES
(
  id            NUMBER not null,
  pid           NUMBER not null,
  name          VARCHAR2(200) not null,
  url           VARCHAR2(200) not null,
  title         VARCHAR2(200),
  target        VARCHAR2(20),
  icon          VARCHAR2(200),
  sort          NUMBER not null,
  fontstylename VARCHAR2(500),
  iconopen      VARCHAR2(80),
  open          CHAR(1)
)

B 插入数据 
insert  into treenodes(id,pid,name,url,title,target,icon,sort,fontStyleName,iconOpen,open) 
values(35,0,'aaa','/index.jsp','aaa',NULL,'images/ajax_dtree/folder.gif',10,'font-weight:bold;font-size:14px;color:#0066FF',NULL,NULL);
insert  into treenodes(id,pid,name,url,title,target,icon,sort,fontStyleName,iconOpen,open) 
values(36,0,'bbb','/index.jsp','bbb',NULL,'images/ajax_dtree/folder.gif',2,'font-weight:bold;font-size:14px;color:#009900',NULL,NULL);
insert  into treenodes(id,pid,name,url,title,target,icon,sort,fontStyleName,iconOpen,open) 
values(37,36,'ccc','#','ccc',NULL,'images/ajax_dtree/folder.gif',3,';;;color:#000000',NULL,NULL);
insert  into treenodes(id,pid,name,url,title,target,icon,sort,fontStyleName,iconOpen,open) 
values(39,35,'ggg','/index.jsp','ggg',NULL,'images/ajax_dtree/folder.gif',4,'font-weight:bold;font-size:14px;color:#000000',NULL,NULL);
insert  into treenodes(id,pid,name,url,title,target,icon,sort,fontStyleName,iconOpen,open) 
values(40,35,'fff','/index.jsp','fff',NULL,'images/ajax_dtree/folder.gif',5,';;;color:#000000',NULL,NULL);
insert  into treenodes(id,pid,name,url,title,target,icon,sort,fontStyleName,iconOpen,open) 
values(92,35,'切实可行','/index.jsp','切实可行',NULL,'images/ajax_dtree/folder.gif',6,';;;color:#000000',NULL,NULL);
insert  into treenodes(id,pid,name,url,title,target,icon,sort,fontStyleName,iconOpen,open) 
values(93,92,'优胜劣汰','/index.jsp','优胜劣汰',NULL,'images/ajax_dtree/folder.gif',7,';;;color:#000000',NULL,NULL);
insert  into treenodes(id,pid,name,url,title,target,icon,sort,fontStyleName,iconOpen,open) 
values(94,92,'举国欢腾','/index.jsp','举国欢腾',NULL,'images/ajax_dtree/folder.gif',8,';;;color:#000000',NULL,NULL);
insert  into treenodes(id,pid,name,url,title,target,icon,sort,fontStyleName,iconOpen,open) 
values(95,35,'基本原理','/index.jsp','基本原理',NULL,'images/ajax_dtree/folder.gif',9,';;;color:#000000',NULL,NULL);
insert  into treenodes(id,pid,name,url,title,target,icon,sort,fontStyleName,iconOpen,open) 
values(96,0,'基本功','/index.jsp','基本功',NULL,'images/ajax_dtree/folder.gif',1,'font-weight:bold;font-size:14px;color:#9933CC',NULL,NULL);
insert  into treenodes(id,pid,name,url,title,target,icon,sort,fontStyleName,iconOpen,open) 
values(97,96,'艺术大师','/index.jsp','艺术大师',NULL,'images/ajax_dtree/folder.gif',11,'font-weight:bold;;;color:#999900',NULL,NULL);
insert  into treenodes(id,pid,name,url,title,target,icon,sort,fontStyleName,iconOpen,open) 
values(98,0,'lanmad!','/index.jsp','lanmad!',NULL,'images/ajax_dtree/folder.gif',12,'font-weight:bold;font-size:20px;color:#FF0000',NULL,NULL);
insert  into treenodes(id,pid,name,url,title,target,icon,sort,fontStyleName,iconOpen,open) 
values(99,98,'架构与J2EE技术','/index.jsp','架构与J2EE技术',NULL,'images/ajax_dtree/folder.gif',19,'font-weight:bold;;;color:#000000',NULL,NULL);
insert  into treenodes(id,pid,name,url,title,target,icon,sort,fontStyleName,iconOpen,open) 
values(100,98,'WEB开发（脚本神功与动态技术）','/index.jsp','WEB开发（脚本神功与动态技术）',NULL,'images/ajax_dtree/folder.gif',18,'font-weight:bold;;;color:#000000',NULL,NULL);
insert  into treenodes(id,pid,name,url,title,target,icon,sort,fontStyleName,iconOpen,open) 
values(101,98,'Linux技术','#','Linux技术',NULL,'images/ajax_dtree/folder.gif',13,'font-weight:bold;;;color:#000000',NULL,NULL);
insert  into treenodes(id,pid,name,url,title,target,icon,sort,fontStyleName,iconOpen,open) 
values(102,96,'中国','/index.jsp','中国',NULL,'images/ajax_dtree/folder.gif',16,';;;color:#000000',NULL,NULL);
insert  into treenodes(id,pid,name,url,title,target,icon,sort,fontStyleName,iconOpen,open) 
values(103,96,'草木灰','#','草木灰',NULL,'images/ajax_dtree/folder.gif',17,';;;color:#000000',NULL,NULL);
insert  into treenodes(id,pid,name,url,title,target,icon,sort,fontStyleName,iconOpen,open) 
values(104,98,'官方经典实例','#','官方经典实例',NULL,'images/ajax_dtree/folder.gif',14,'font-weight:bold;;;color:#000000',NULL,NULL);
insert  into treenodes(id,pid,name,url,title,target,icon,sort,fontStyleName,iconOpen,open) 
values(105,98,'数据库开发','#','数据库开发',NULL,'images/ajax_dtree/folder.gif',15,'font-weight:bold;;;color:#000000',NULL,NULL);

参见工程如下
  • 大小: 35.2 KB
  • 大小: 20.3 KB
分享到：
| jQuery之弹出层(用于提示)
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery.zTree.js.rar

    jquery-1.4.4.min.js jquery.ztree.exhide.min.js jquery.ztree.exedit.min.js jquery.ztree.excheck.min.js jquery.ztree.core.min.js jquery.ztree.all.min.js jquery-1.4.4.js jquery.ztree.exhide.js jquery....

    jquery.ztree

    ztree demo jquery.ztree,jquery.ztree.core.js,jquery.ztree.core-3.5.min.js,jquery.ztree.excheck-3.5.min.js，jquery.ztree.all.min.js，jquery.ztree.exedit.js，jquery.ztree.exhide.min.js，jquery-1.4.4.min...

    jquery.ztree.exhide.js

    ztree实现模糊查询需要的依赖包：jquery.ztree.exhide.js

    JQuery-zTree-v2.6.rar_Java 8_jquery tree_jquery-ztree-2.6.js_jqu

    1、兼容 IE、FireFox、Chrome 等浏览器 2、在一个页面内可同时生成多个 Tree 实例 3、支持 JSON 数据 4、支持一次性静态生成 和 Ajax 异步加载 两种方式 5、支持多种事件响应及反馈 6、支持 Tree 的节点移动、...

    bootstrap样式的jquery-ztree

    《Bootstrap样式的jQuery-zTree详解》 在网页开发中，数据的展示往往需要有层次感，这时候树形控件就显得尤为重要。jQuery-zTree是一款基于jQuery的强大的树形插件，它提供了丰富的功能和灵活的配置选项。而将...

    jquery.ztree.all.js

    用于生成树形组件，javaScript的一个插件，用于使用树形的下拉组件！

    jquery.ztree.excheck.js

    是一个js，ztree实现权限管理所需的，可自行去ztree官网下载

    jquery.ztree.core.js

    是一个js文件，zTree实现权限分配所需，可去ztree官网自行下载

    jquery.Ztree.js + css

    《jQuery ZTree：构建高效资源管理的树形控件》 在Web开发中，树形结构经常被用于展示层级关系的数据，例如文件系统、组织架构等。jQuery ZTree是一款基于jQuery的插件，专门用于创建交互式的树形控件，为资源管理...

    JQuery zTree v3.3

    JQuery zTree是一款基于JavaScript的开源树形插件，它主要应用于网页开发，提供丰富的树状数据展示功能。zTree v3.3是该插件的一个版本，它在前一版本的基础上进行了优化和增强，旨在提供更高效、更稳定的服务。 在...

    jquery-ztree.rar

    《jQuery zTree详解与应用实践》 jQuery zTree是一款基于jQuery的树形插件，它在Web开发中广泛应用于构建动态、交互式的树状结构。zTree的核心特性在于其轻量级、高度可定制和良好的性能表现，为开发者提供了丰富的...

    jquery-zTree工具包

    《深入解析jQuery-zTree工具包》 在网页开发中，数据可视化和交互性是不可或缺的部分，而jQuery-zTree就是一款强大的JavaScript实现的树状菜单插件。它以其丰富的功能、良好的扩展性和易用性，被广泛应用在各种项目...

    jquery.zTree

    **jQuery zTree** 是一款基于JavaScript的开源控件，它利用了流行的 **jQuery** 库，专门用于构建功能丰富的树状结构（tree structure）。在Web开发中，zTree被广泛应用于展示层次化数据，如组织架构、目录导航、...

    Jquery-ztree树形菜单代码并适应移动端

    JQuery-zTree是一款基于jQuery的树形插件，它提供了丰富的功能和良好的性能，尤其适用于构建树形结构的菜单和数据展示。在移动端应用中，zTree能够自适应屏幕尺寸，提供良好的用户体验。本项目提供的代码是针对...

    jquery.ztree.core.texttree.js

    ztree添加功能，使其支持字体图标，核心文件jquery.ztree.core.js，欢迎下载。

    jquery ztree 异步动态加载

    **jQuery ZTree 异步动态加载详解** 在Web开发中，数据展示往往涉及到大量信息的处理，特别是树形结构的数据。jQuery ZTree是一款强大的JavaScript组件，用于构建具有丰富交互效果的树状菜单或树形控件。在面对大...

    jquery-zTreeAPI v2.6.zip

    《jQuery-zTree API v2.6详解：打造高效前端树形组件》 在网页开发中，数据的组织和展示方式多种多样，其中树形结构因其层次清晰、逻辑明确的特点，常用于目录管理、组织架构展示等领域。jQuery-zTree是一款基于...

    jQuery-zTree

    **jQuery-zTree详解** jQuery-zTree是一款基于JavaScript的开源插件，主要用于构建可交互的树形结构，尤其在Web开发中被广泛应用于数据展示、菜单导航等场景。它结合了jQuery的简洁API与树形结构的高效管理，使得...

    jquery-ztree-2.5.js

    jquery-ztree-2.5.js

Magicbox
Global site tag (gtag.js) - Google Analytics