由于公司项目的须要。现学了一下zTree的使用。

以下是我项目的结构图：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYmVuamFtaW5fd2h4/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

baseDao类

  1. package com.wiseweb.zTree;
  2.  
  3. import java.sql.Connection;
  4. import java.sql.DriverManager;
  5. import java.sql.PreparedStatement;
  6. import java.sql.ResultSet;
  7. import java.sql.SQLException;
  8. import java.sql.Statement;
  9.  
  10. public class BaseDao {
  11. 	static Connection conn ;
  12. 	PreparedStatement pstm ;
  13. 	ResultSet rs ;
  14.  
  15. 	public static Connection getConnection(){
  16. 		try {
  17. 			Class.forName("com.mysql.jdbc.Driver") ;
  18. 			try {
  19. 				conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/crud", "root", "root") ;
  20. 				System.out.println("------------打开连接---------------");
  21. 			} catch (SQLException e) {
  22. 				System.out.println("------------连接失败---------------");
  23. 				e.printStackTrace();
  24. 			}
  25. 		} catch (ClassNotFoundException e) {
  26. 			System.out.println("-----------------驱动载入失败---------------");
  27. 			e.printStackTrace();
  28. 		}
  29. 		return conn ;
  30. 	}
  31. 	public static void closeConnection(ResultSet rs,Statement st,Connection conn){
  32. 		try {
  33. 			if(rs != null){
  34. 				rs.close() ;
  35. 			}
  36. 			if(st != null){
  37. 				st.close() ;
  38. 			}
  39. 			if(conn != null){
  40. 				conn.close() ;
  41. 			}
  42. 			System.out.println("----------------关闭连接----------------");
  43. 		} catch (SQLException e) {
  44. 			System.out.println("----------------关闭连接失败----------------");
  45. 			e.printStackTrace();
  46. 		}
  47. 	}
  48. }

实体Competence类

  1. package com.wiseweb.zTree;
  2.  
  3. public class Competence {
  4. 	private int id ;
  5. 	private int pId ;
  6. 	private int isParent ;
  7. 	private String name ;
  8. 	private int open ;
  9. 	public int getId() {
  10. 		return id;
  11. 	}
  12. 	public void setId(int id) {
  13. 		this.id = id;
  14. 	}
  15. 	public int getpId() {
  16. 		return pId;
  17. 	}
  18. 	public void setpId(int pId) {
  19. 		this.pId = pId;
  20. 	}
  21. 	public int getIsParent() {
  22. 		return isParent;
  23. 	}
  24. 	public void setIsParent(int isParent) {
  25. 		this.isParent = isParent;
  26. 	}
  27. 	public String getName() {
  28. 		return name;
  29. 	}
  30. 	public void setName(String name) {
  31. 		this.name = name;
  32. 	}
  33. 	public int getOpen() {
  34. 		return open;
  35. 	}
  36. 	public void setOpen(int open) {
  37. 		this.open = open;
  38. 	}
  39.  
  40. }

Test类 

  1. package com.wiseweb.zTree;
  2.  
  3. import java.sql.Connection;
  4. import java.sql.SQLException;
  5. import java.util.ArrayList;
  6. import java.util.List;
  7.  
  8. public class Test extends BaseDao{
  9. 	public List<Competence> getAllAuthorize(){
  10. 		List<Competence> authorizes = new ArrayList<Competence>() ;
  11. 		Connection conn = getConnection() ;
  12. 		try {
  13. 			pstm = conn.prepareStatement("select * from competence") ;
  14. 			rs = pstm.executeQuery() ;
  15. 			while(rs.next()){
  16. 				Competence authorize = new Competence() ;
  17. 				authorize.setId(rs.getInt("id")) ;
  18. 				authorize.setName(rs.getString("name")) ;
  19. 				authorize.setIsParent(rs.getInt("isParent")) ;
  20. 				authorize.setOpen(rs.getInt("open")) ;
  21. 				authorize.setpId(rs.getInt("pId")) ;
  22. 				authorizes.add(authorize) ;
  23. 			}
  24. 		} catch (SQLException e) {
  25. 			System.out.println("-----------查询competence失败-------------");
  26. 			e.printStackTrace();
  27. 		}finally{
  28. 			closeConnection(rs,pstm,conn) ;
  29. 		}
  30. 		return authorizes ;
  31. 	}
  32. 	public String getJsonData(){
  33. 		List<Competence> list = getAllAuthorize() ;
  34. 		StringBuffer json = new StringBuffer("[") ;
  35. 		String data = "" ;
  36. 		int length = list.size() ;
  37. 		for(int i=0;i<length;i++){
  38. 			json.append("{id:" + list.get(i).getId() + ",") ;
  39. 			json.append("pId:" + list.get(i).getpId() + ",") ;
  40. 			json.append("name:\"" + list.get(i).getName() + "\",") ;
  41. 			if(list.get(i).getIsParent() != 0){
  42. 				json.append("isParent:" + list.get(i).getIsParent() + ",") ;
  43. 			}
  44. 			if(list.get(i).getOpen() != 0){
  45. 				json.append("open:" + list.get(i).getOpen() + ",") ;
  46. 			}
  47. 			data = json.substring(0,json.lastIndexOf(",")) + "}," ;
  48. 			json = new StringBuffer(data) ;
  49. 		}
  50. 		data = json.substring(0,json.length()-1) + "]" ;
  51. 		System.out.println(data);
  52. 		return data ;
  53. 	}
  54. 	public static void main(String[] args) {
  55. 		new Test().getJsonData() ;
  56. 	}
  57. }

asynload.html

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3.   <head>
  4.     <title>asynload.html</title>
  5.  
  6.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  7.     <meta http-equiv="description" content="this is my page">
  8.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  9.     <link rel="stylesheet" href="css/demo.css" type="text/css">
  10.     <link rel="stylesheet" href="css/zTreeStyle.css" type="text/css">
  11.     <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
  12.     <script type="text/javascript" src="js/jquery.ztree.core-3.5.js"></script>
  13.  
  14. 	<script type="text/javascript">
  15. 		var setting = {
  16. 			async:{
  17. 				enable:true,
  18. 				url:"loadData.jsp",
  19. 				autoParam:["id"],
  20. 			},
  21. 			data:{
  22. 				simpleData:{
  23. 					enable:true,
  24. 					idKey:"id",
  25. 					pIdKey:"pId",
  26. 					rootPId:0
  27. 				}
  28. 			},
  29. 			callback:{
  30. 				onClick:function(event,treeId,treeNode,clickFlag){
  31. 					if(!treeNode.isParent){
  32. 						alert("treeId自己主动编号：" + treeNode.tId + ",节点id是：" + treeNode.id + ",节点文本是：" + treeNode.name) ;
  33. 					}
  34. 				},
  35. 				onAsyncError:zTreeOnAsyncError,
  36. 				onAsyncSuccess:function(event,treeId,treeNode,msg){
  37.  
  38. 				}
  39. 			}
  40. 		};
  41. 		function filter(treeId, parentNode, childNodes) {
  42. 	        if (!childNodes)
  43. 	            return null;
  44. 	        for ( var i = 0, l = childNodes.length; i < l; i++) {
  45. 	            childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
  46. 	        }
  47. 	        return childNodes;
  48. 	    }
  49. 		function zTreeOnAsyncError(event,treeId,treeNode,XMLHttpRequest,textStatus,errorThrown){
  50. 			alert("载入错误：" + XMLHttpRequest) ;
  51. 		}
  52. 		$(document).ready(function(){
  53. 			$.fn.zTree.init($("#treeDemo"),setting) ;
  54. 		}) ;
  55. 	</script>
  56.   </head>
  57.  
  58.   <body>
  59.     <div>
  60.     	<ul id="treeDemo" class="zTree"></ul>
  61.     </div>
  62.   </body>
  63. </html>

index.jsp主程序

  1. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
  2. <%
  3. String path = request.getContextPath();
  4. //String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  5. request.setAttribute("ctx",request.getContextPath());
  6. %>
  7.  
  8. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  9. <html>
  10.   <head>
  11.     <title>zTree</title>
  12. 	<meta http-equiv="pragma" content="no-cache">
  13. 	<meta http-equiv="cache-control" content="no-cache">
  14. 	<meta http-equiv="expires" content="0">
  15. 	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  16. 	<meta http-equiv="description" content="This is my page">
  17. 	<link rel="stylesheet" href="${ctx }/css/demo.css" type="text/css">
  18.     <link rel="stylesheet" href="${ctx }/css/zTreeStyle.css" type="text/css">
  19.     <script type="text/javascript" src="${ctx }/js/jquery-1.4.4.min.js"></script>
  20.     <script type="text/javascript" src="${ctx }/js/jquery.ztree.core-3.5.js"></script>
  21.  
  22. 	<script type="text/javascript">
  23. 		var setting = {
  24. 			async:{
  25. 				enable:true,
  26. 				url:"loadData.jsp",
  27. 				autoParam:["id"],
  28. 			},
  29. 			data:{
  30. 				simpleData:{
  31. 					enable:true,
  32. 					idKey:"id",
  33. 					pIdKey:"pId",
  34. 					rootPId:0
  35. 				}
  36. 			},
  37. 			callback:{
  38. 				onClick:function(event,treeId,treeNode,clickFlag){
  39. 					if(!treeNode.isParent){
  40. 						alert("treeId自己主动编号：" + treeNode.tId + ",节点id是：" + treeNode.id + ",节点文本是：" + treeNode.name) ;
  41. 					}
  42. 				},
  43. 				onAsyncError:zTreeOnAsyncError,
  44. 				onAsyncSuccess:function(event,treeId,treeNode,msg){
  45.  
  46. 				}
  47. 			}
  48. 		};
  49. 		function filter(treeId, parentNode, childNodes) {
  50. 	        if (!childNodes)
  51. 	            return null;
  52. 	        for ( var i = 0, l = childNodes.length; i < l; i++) {
  53. 	            childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
  54. 	        }
  55. 	        return childNodes;
  56. 	    }
  57. 		function zTreeOnAsyncError(event,treeId,treeNode,XMLHttpRequest,textStatus,errorThrown){
  58. 			alert("载入错误：" + XMLHttpRequest) ;
  59. 		}
  60. 		$(document).ready(function(){
  61. 			$.fn.zTree.init($("#treeDemo"),setting) ;
  62. 		}) ;
  63. 	</script>
  64.   </head>
  65.  
  66.   <body>
  67.      <div>
  68.     	<ul id="treeDemo" class="zTree"></ul>
  69.     </div>
  70.   </body>
  71. </html>

loadData.jsp

  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2. <%@ page import="com.wiseweb.zTree.*" %>
  3. <%
  4. 	String id = request.getParameter("id") ;
  5. 	System.out.println("得到的节点id: " + id) ;
  6. 	Test demo = new Test() ;
  7. 	String json = demo.getJsonData() ;
  8. 	out.print(json) ;
  9. %>

zTree.html

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3.   <head>
  4.     <title>zTree.html</title>
  5.  
  6.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  7.     <meta http-equiv="description" content="this is my page">
  8.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  9.     <link rel="stylesheet" href="css/demo.css" type="text/css">
  10.     <link rel="stylesheet" href="css/zTreeStyle.css" type="text/css">
  11.     <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
  12.     <script type="text/javascript" src="js/jquery.ztree.core-3.5.js"></script>
  13.     <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
  14.  
  15. 	<script type="text/javascript">
  16. 		function setFontCss(treeId,treeNode){
  17. 			return treeNode.level==0?{color:"red"}:{};
  18. 		}
  19. 		var setting = {
  20. 			data:{
  21. 				simpleData: {
  22. 					enable: true,
  23. 					idKey: "id",
  24. 					pIdKey: "pId",
  25. 					rootPId:0,
  26. 				}
  27. 			},
  28. 			view:{
  29. 				showLine: false,//是否显示连接线
  30. 				//showIcon: false,//是否显示节点图标
  31. 				//showTitle: false,//是否显示节点的title提示信息
  32. 				fontCss: setFontCss,//改变字体颜色和样式
  33. 			}
  34. 		};
  35. 		var zNodes = [
  36. 		              {id:1, pId:0, name:"父节点1-展开", open:true, iconOpen:"WEB-INF/image/1_open.png", iconClose:"WEB-INF/image/1_close.png"},
  37. 		              {id:11, pId:1, name:"父节点11-折叠", icon:"WEB-INF/image/2.png"},
  38. 		              {id:111, pId:11, name:"叶子节点111",url:"http://www.baidu.com"},//超链接
  39. 		              {id:112, pId:11, name:"叶子节点112"},
  40. 		              {id:113, pId:11, name:"叶子节点113"},
  41. 		              {id:114, pId:11, name:"叶子节点114"},
  42. 		              { id:12, pId:1, name:"父节点12 - 折叠"},
  43. 			  			{ id:121, pId:12, name:"叶子节点121"},
  44. 			  			{ id:122, pId:12, name:"叶子节点122"},
  45. 			  			{ id:123, pId:12, name:"叶子节点123"},
  46. 			  			{ id:124, pId:12, name:"叶子节点124"},
  47. 			  			{ id:13, pId:1, name:"父节点13 - 没有子节点", isParent:true},
  48. 			  			{ id:2, pId:0, name:"父节点2 - 折叠"},
  49. 			  			{ id:21, pId:2, name:"父节点21 - 展开", open:true},
  50. 			  			{ id:211, pId:21, name:"叶子节点211"},
  51. 			  			{ id:212, pId:21, name:"叶子节点212"},
  52. 			  			{ id:213, pId:21, name:"叶子节点213"},
  53. 			  			{ id:214, pId:21, name:"叶子节点214"},
  54. 			  			{ id:22, pId:2, name:"父节点22 - 折叠"},
  55. 			  			{ id:221, pId:22, name:"叶子节点221"},
  56. 			  			{ id:222, pId:22, name:"叶子节点222"},
  57. 			  			{ id:223, pId:22, name:"叶子节点223"},
  58. 			  			{ id:224, pId:22, name:"叶子节点224"},
  59. 			  			{ id:23, pId:2, name:"父节点23 - 折叠"},
  60. 			  			{ id:231, pId:23, name:"叶子节点231"},
  61. 			  			{ id:232, pId:23, name:"叶子节点232"},
  62. 			  			{ id:233, pId:23, name:"叶子节点233"},
  63. 			  			{ id:234, pId:23, name:"叶子节点234"},
  64. 			  			{ id:3, pId:0, name:"父节点3 - 没有子节点", isParent:true}
  65. 		];
  66. 		$(document).ready(function(){
  67. 			$.fn.zTree.init($("#treeDemo"),setting,zNodes) ;
  68. 		}) ;
  69. 	</script>
  70.   </head>
  71.  
  72.   <body>
  73.     <h1>最简单的树--简单的json数据</h1>
  74.     <ul id="treeDemo" class="ztree"></ul>
  75.   </body>
  76. </html>

数据库图片：



浏览器输入http://localhost:8080/testZtree进行显示

结果为：

使用zTree进行数据动态显示的更多相关文章

  1. 爱上MVC3~MVC+ZTree大数据异步树加载

    回到目录 理论部分: MVC+ZTree:指在.net MVC环境下进行开发,ZTree是一个jquery的树插件 大数据:一般我们系统中,有一些表结构属于树型的,如分类,地域,菜单,网站导航等等,而 ...

  2. MVC小系列（十四）【MVC+ZTree大数据异步树加载】

    ZTree是一个jquery的树插件可以异步加载 第一步定义一个标准的接口(指的是与ztree默认的数据元素保持一致) /// <summary> /// ZTree数据结构 /// &l ...

  3. MVC+ZTree大数据异步树加载

    实例部分: 首先是为ZTree提供的数据规范,定义一个标准的接口,这样对于前台调用是清楚的,简单的,因为它返回的JSON数据将与ZTree默认的数据元素保持一致 /// <summary> ...

  4. ztree多种数据包装以及相关设置

    首先来一个完整的ztree代码 html代码 <form id="addTreeDataFrm" method="post" class="fo ...

  5. 项目一:项目第二天 Jquery ztree使用展示菜单数据 2、 基础设置需求分析 3、 搭建项目框架环境--ssh（复习） 4、 SpringData-JPA持久层入门案例（重点） 5、 Easyui menubutton菜单按钮使用 6、 Easyui messager消息框使用

    1. Jquery ztree使用展示菜单数据 2. 基础设置需求分析 3. 搭建项目框架环境--ssh(复习) 4. SpringData-JPA持久层入门案例(重点) 5. Easyui menu ...

  6. jQuery Ztree基本用法

    1.首先在页面上有<ul/>标签 <ul id="tree" class="ztree"></ul> 2.定义ztree的配 ...

  7. jq生成目录文件树jQuery Ztree基本用法

    转自:http://www.cnblogs.com/linjiqin/p/4547452.html 1.首先在页面上有<ul/>标签 ? 1 <ul id="tree&qu ...

  8. 转：zTree树控件扩展篇：巧用zTree控件实现文本框输入关键词自动模糊查找zTree树节点实现模糊匹配下拉选择效果

    是否可以借助于zTree实现文本框输入关键词自动模糊匹配zTree下拉树,然后选择下拉树内节点显示在文本框内且隐藏下拉树. 看到这个需求脑子里头大致已经想到了要如何实现这样一个需求,当时是限于时间问题 ...

  9. 转：zTree树控件key配置之title：zTree树节点名称过长如何省略显示且鼠标移入节点上能够显示全称

    当树节点的名称有些很长时,全部显示出来显得很拥挤的情况下,我们会想到用省略节点名称来代替,当鼠标移入节点时能够显示该节点的全称.这样我们应该如何做呢? 首先,我们要在树的节点内多增加一个属性用于设置该 ...

随机推荐

  1. STM32中如何对printf函数重定向

    通过USART1向计算机的串口调试助手打印数据,或者接收计算机串口调试助手的数据,接下来我们现STM32工程上的printf()函数,方便用于程序开发中调试信息的打印. 方法一:使用MicroLIB库 ...

  2. python 跨域

    CORS跨域请求 CORS即Cross Origin Resource Sharing 跨域资源共享, 那么跨域请求还分为两种,一种叫简单请求,一种是复杂请求~~ 简单请求 HTTP方法是下列方法之一 ...

  3. ansible部署

    ansible的特性:基于Python语言实现,由paramiko,PyYAML和jinjia2三个关键模块 部署简单,agentless 默认使用ssh协议        (1) 基于秘钥认证方式  ...

  4. ICMP TYPE CODE

    TYPE CODE Description Query Error 0 0 Echo Reply——回显应答(Ping应答) x   3 0 Network Unreachable——网络不可达   ...

  5. wamp Apache和mysql服务无法启动的终极解决方法！！！！！！

    用了几年的wampserver 突然宣告无法启动,Apache和mysql都崩溃了,在计算机的服务选项里面也是无法启动的,系统报了一个未知错误,重装了N个版本的PHP集成开发环境,都宣告失败! 我想应 ...

  6. MVC 上传文件的方法

    这两天又开始研究MVC了,期间断断续续已经搞了好久了,可是都没坚持下来.囧!这次一定坚持搞出来一个名堂. 废话少说,直接上代码. 前台引擎采用Razor @model System.Web.HttpP ...

  7. 多线程环境下 cpu % 分析

    1. top -H(查看阻塞进程,线程) 2. jstack  pid(查看堆栈信息) 另附 利用 Java dump 进行 JVM 故障诊断 http://www.blogjava.net/yuwe ...

  8. Day 2 操作系统基础

    课前复习新知识 RAID(Redundant Arrays of Independent Disks)独立冗余磁盘阵列 定义:加州大学伯克利分校1987年提出,最初是为了组合小的廉价磁盘来代替大的昂贵 ...

  9. dbms_metadata.get_ddl的使用总结

    https://blog.csdn.net/newhappy2008/article/details/34823339

  10. PAT (Advanced Level) 1089. Insert or Merge (25)

    简单题.模拟一下即可. #include<cstdio> #include<cstring> #include<cmath> #include<vector& ...