使用zTree进行数据动态显示

  1. 云栖社区>
  2. 博客列表>
  3. 正文

使用zTree进行数据动态显示

benjaminwhx 2016-05-19 14:38:31 浏览2064 评论0

摘要: 因为公司项目的需要,现学了一下zTree的使用。 下面是我项目的结构图: baseDao类 [html] view plain copy  print? package com.wiseweb.

因为公司项目的需要,现学了一下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 = 0l = 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 = 0l = 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进行显示

结果为:

用云栖社区APP,舒服~

【云栖快讯】诚邀你用自己的技术能力来用心回答每一个问题,通过回答传承技术知识、经验、心得,问答专家期待你加入!  详情请点击

网友评论

benjaminwhx
文章204篇 | 关注16
关注
支持以数据库为核心的结构化存储产品之间的数据传输。 它是一种集数据迁移、数据订阅及数据实时同... 查看详情
MySQL 是全球最受欢迎的开源数据库,阿里云MySQL版 通过深度的内核优化和独享实例提供... 查看详情
大数据开发套件(Data IDE),提供可视化开发界面、离线任务调度运维、快速数据集成、多人... 查看详情
为您提供简单高效、处理能力可弹性伸缩的计算服务,帮助您快速构建更稳定、安全的应用,提升运维效... 查看详情
阿里云9.10会员日

阿里云9.10会员日