使用zTree进行数据动态显示

因为公司项目的需要，现学了一下zTree的使用。

下面是我项目的结构图：

baseDao类

[html] view plain copy

 print?

  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类

[html] view plain copy

 print?

  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类

[html] view plain copy

 print?

  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

[html] view plain copy

 print?

  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主程序

[html] view plain copy

 print?

  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

[html] view plain copy

 print?

  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

[html] view plain copy

 print?

  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进行显示

结果为：

时间： 2024-12-01 01:52:40

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

界面点击按键-sd卡监听，listview数据动态显示，点击事件

问题描述 sd卡监听,listview数据动态显示,点击事件 大家好!!请教下界面点击按键显示AlertDialog,AlertDialog里面的listview显示sd卡的文件, 请教下怎么编写?? 解决方案 ListView点击事件监听失效ListView长按事件和点击事件监听 解决方案二: 什么应用?单机程序?运行环境是什么?

ztree控制checkbox可选或者不可选例子

1.引入ztree树相关的js文件 <link rel="stylesheet" href="../../../css/demo.css" type="text/css">   <link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">   <sc

悠哉悠哉，一个复合查询方法

几乎每个完整的应用程序都会需要一个复合查询.建立一个功能强大的复合查询首先必须要能够动态生成查询条件,其次应该能够对查询到的数据进行修改,最后这个复合查询最好能够对一对多的两个表建立条件进行查询. 在VFP里建立查询的方法主要有这么几种:一是使用VFP中自带的SearchClass类:二是建立一个查询:三是建立一个视图,其中包括参数化视图.宏替换Sql语句视图:四是建立一个Grid,将其数据源设置为SQL语句或临时表. 不管哪一种方法,其实质都是使用SQL语句. 这几种方法各有各的优点,也都有缺

一个复合查询方法

几乎每个完整的应用程序都会需要一个复合查询.建立一个功能强大的复合查询首先必须要能够动态 生成查询条件,其次应该能够对查询到的数据进行修改,最后这个复合查询最好能够对一对多的两个表建 立条件进行查询. 在VFP里建立查询的方法主要有这么几种:一是使用VFP中自带的SearchClass类:二是建立一个查询: 三是建立一个视图,其中包括参数化视图.宏替换Sql语句视图:四是建立一个Grid,将其数据源设置为 SQL语句或临时表. 不管哪一种方法,其实质都是使用SQL语句. 这几种方法各有各的优点,

Jquery $.getJSON 在IE下的缓存问题解决方法_jquery

在工作中主页实现Ztree Ztree的数据是后台返回的JSON对象 因为树是固定的所以每次刷新树 $.getJSON 的url都是相同的 问题来了 我修改 或者 新增树节点 然后刷新tree IE竟然毫无变化 在其他浏览器上面都OK 这让我纠结了 然后在网上搜索了一下资料发现 解决办法 解决办法: Jquery 的 $.getJSON请求有一个缓存机制 就是在请求相同URL访问后台时候 他会直接从页面缓存的数据中取出来数据 而不是请求后台 所以我们要改变一个URL 这是我们的URL var u

java串口通讯

  最近在做java串口通讯,主要是用个人电脑通过串口从RS485读取数据,并通过crc循环冗余校验,把接收正确的数据解析,插入数据库mysql,并用SSH技术把数据库数据以表格以及图表形式显示       思路:  1.为了从RS485读取数据,由于暂时没有硬件设备,系统是win7,故采用Virtual Serial Port Drive(VSPD)这块虚拟串口软件代替.并下载sscom32.exe模拟串口通信软件.  2. 要想实现串口通信,用Java实现串口通信(windows系统下),需

阿里云运维部署工具AppDeploy最佳实践

阿里云AppDeploy版是一个通过SSH实现的流式命令行工具,可用于完成应用部署和远程运维管理,其工作于python平台上,具有良好的可移植性:AppDeploy将本地应用软件上传到远端服务器,并执行用户预定义的产品部署命令. 工具当前免费下载使用,地址: http://market.aliyun.com/products/53690006/cmgj000331.html http://market.aliyun.com/products/53690006/cmgj000321.html 本文

Winfrom 做一个菜单

问题描述 原本菜单固定的,现在想做成动态显示的///<summary>///用户单击窗体左侧"导航栏"中按钮时的事件处理方法.///</summary>privatevoidNavBar_ImageButtonClick(objectsender,stringtargetModule){switch(targetModule){case"Main"://"欢迎使用"功能模块FormMain.LoadNewControl(M

后台怎么保存树型结构list集合的代码？

问题描述 就是查出所有的节点保存到list集合里面.root ->节点1 -->n1 -->n2 --->m后台要把这种结构保存起来,在页面上面的时候就直接打出来.有个level 属性为1的话 加 -> 2 加-->显示如附件图片.用递归写,不知道我写的那个对不,反正是栈溢出了. 问题补充:柴秉承 写道 解决方案 引用恩,是啊,所以得到了重复数据啊.能不能把代码贴给我啊?我逻辑思维不是很好的,要不.... 通常发现问题比解决问题略为重要点,因为相比下发现问题更加考验编程