备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

使用zTree进行数据动态显示

2016-05-19 3456
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

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

下面是我项目的结构图：


baseDao类

[html]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  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 ? 在CODE上查看代码片 派生到我的代码片
  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 ? 在CODE上查看代码片 派生到我的代码片
  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 ? 在CODE上查看代码片 派生到我的代码片
  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 ? 在CODE上查看代码片 派生到我的代码片
  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 ? 在CODE上查看代码片 派生到我的代码片
  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 ? 在CODE上查看代码片 派生到我的代码片
  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进行显示

结果为：

文章标签：
前端开发
JavaScript
Java
benjaminwhx
目录
相关文章
阿甘兄
|
6月前
10zTree - 用 zTree 方法异步加载节点数据
10zTree - 用 zTree 方法异步加载节点数据
阿甘兄
52 0
阿甘兄
|
6月前
03zTree - 不显示连接线
03zTree - 不显示连接线
阿甘兄
28 0
阿甘兄
|
6月前
|
JSON 数据格式
08zTree - 超链接显示
08zTree - 超链接显示
阿甘兄
24 0
萝卜头不吃萝卜头
|
9月前
|
JavaScript
js实现表格隔行换色
最终样式：
萝卜头不吃萝卜头
36 0
q7s2kces74wvy
|
前端开发 JavaScript 开发者
js 功能-轮播图效果-获取元素 &amp;自动滚动|学习笔记
快速学习 js 功能-轮播图效果-获取元素 &amp;自动滚动
q7s2kces74wvy
138 0
js 功能-轮播图效果-获取元素 &amp;自动滚动|学习笔记
TimeFriends
|
JavaScript 前端开发
JavaScript(js)隔行换色,省市二级联动,全选,全不选,反选
JavaScript(js)隔行换色,省市二级联动,全选,全不选,反选
TimeFriends
152 0
vaelcy
|
JavaScript 前端开发 数据格式
表头加字体图标hover显示信息 vue
文章是针对需求当表格每个表头的字体图标鼠标放上去悬停展示不同的信息时的处理方法
vaelcy
243 0
程序员诗人
|
前端开发 JavaScript
jquery + Bootstrap : data-toggle="popover"鼠标放上去显示悬浮层 Tips
image.png jquery鼠标放上去显示悬浮层 Tips html js $(() => { var tip = $('#time_range_fa'); $(tip).
程序员诗人
2128 0
技术小胖子
|
JavaScript 前端开发 数据格式
使用ztree展示树形菜单结构
技术小胖子
1694 0
技术小牛人
|
JavaScript
jQuery获取动态表格中checkbox被选中一行的属性数据
技术小牛人
1358 0

热门文章

最新文章

  • 1
    Mac安装并使用telnet命令操作
  • 2
    OSS回源的几种方式和应用场景
  • 3
    [剑指offer] 孩子们的游戏(圆圈中最后剩下的数)
  • 4
    网络安全系列之二十二 Windows用户账号加固
  • 5
    我理解的一个程序员如何学习前端开发
  • 6
    《社交网站界面设计（原书第2版）》——1.9　为设备之间的空间进行设计
  • 7
    《Microduino实战》——1.2　为什么要开源
  • 8
    .Net函数Math.Round你会用吗？
  • 9
    麻省理工大学新发明：暗黑WiFi透视技术
  • 10
    2014秋C++第19周 补充代码 哈希法的存储与查找
  • 1
    R语言关联规则模型(Apriori算法)挖掘杂货店的交易数据与交互可视化
    25
  • 2
    R语言近似贝叶斯计算MCMC（ABC-MCMC）轨迹图和边缘图可视化
    21
  • 3
    r语言中对LASSO回归，Ridge岭回归和弹性网络Elastic Net模型实现-4
    29
  • 4
    Sentieon | 每周文献-Multi-omics-第四十一期
    25
  • 5
    数据分享|R语言广义线性模型GLM：线性最小二乘、对数变换、泊松、二项式逻辑回归分析冰淇淋销售时间序列数据和模拟-2
    15
  • 6
    数据分享|R语言广义线性模型GLM：线性最小二乘、对数变换、泊松、二项式逻辑回归分析冰淇淋销售时间序列数据和模拟-1
    22
  • 7
    基于RT-Thread摄像头车牌图像采集系统
    21
  • 8
    R语言极值理论：希尔HILL统计量尾部指数参数估计可视化
    15
  • 9
    【视频】R语言中的分布滞后非线性模型（DLNM）与发病率，死亡率和空气污染示例
    18
  • 10
    sql语句创建数据库
    17

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）