程序博客网 > 珍妮曲奇授权的淘宝店

Dtree+jQuery实现动态树结构

来源：互联网 发布：珍妮曲奇授权的淘宝店 编辑：程序博客网 时间：2024/04/30 13:41

最近有朋友问我一个动态生成树怎么做.后来就用Dtree  js组件和Jquery实现了一个demo给他.现在贴出来给初学者做些参考.

 

1.先来介绍一下. dtree 的用法.(我引用了以前我收集的一篇文章.还比较详细,出处不记得啦).文章下面会附带dtree用法的例子.

         Dtree目录树的总结

                  一：函数

                           1：页面中
                              tree.add(id,pid,name,url,title,target,icon,iconOpen,open);
                                  参数说明：
                                              id         ：节点自身的id
                                              pid       ：节点的父节点的id
                                              name    ：节点显示在页面上的名称
                                              url        ：节点的链接地址
                                              title      ：鼠标放在节点上所出现的提示信息
                                              target   ：节点链接所打开的目标frame(如框架目标mainFrame,_blank,_self 类)
                                              icon      ：节点关闭时的显示图片的路径
                                              iconOpen：节点打开时的显示图片的路径
                                              open    ：布尔型，节点是否打开（默认为false）
                                             注：open项：顶级节点一般采用true，即pid是－1的节点

                            2：dtree.js文件中
                                             约87－113行是一些默认图片的路径，注意要指对。


二：页面中的书写
          1：默认值的书写规则（从左至右，依次省略）
                          即 tree.add(id,pid,name,url);后面5个参数可以省略
          2：有间隔时的默认值（如存在第6个参数，但第5个参数想用默认值）
                         即 tree.add(id,pid,name,url,"",target);必须这样写
         3：样式表
           （1）：可以将dtree.css中的样式附加到你的应用中的主css中，如a.css
           （2）：也可以同时引用dtree.css与a.css两个文件，但前提条件是两个css文件中不能有重复的样式
     

Html代码 复制代码
  1. <link href="/jingjindatabase/pub/css/a.css" rel="stylesheet" type="text/css" />  
  2. <link href="/jingjindatabase/pub/css/dtree.css" rel="stylesheet" type="text/css" />  
[html] view plaincopyprint?
  1. <link href="/jingjindatabase/pub/css/a.css" rel="stylesheet" type="text/css" />  
  2. <link href="/jingjindatabase/pub/css/dtree.css" rel="stylesheet" type="text/css" />  

          4：页面代码书写的位置是：一般写在表格的td之中

Javascript代码 复制代码
  1. <script type="text/javascript" src="/myMobanGis/pub/js/dtree.js"></script>   
  2. <script type="text/javascript">   
  3. tree = new dTree('tree');   
  4. tree.add("1","-1","京津","","","","","",true);   
  5. tree.add("11","1","A","","","","","",true);   
  6.  tree.add("110","11","A-1","content.jsp?moduleName=XXX","","mainFrame");   
  7.  tree.add("111","11","A-2","javascript:void(0)","","链接在哪里显示");   
  8.  tree.add("112","11","A-3","javascript:void(0)","","mainFrame");   
  9.  tree.add("113","11","A-4","/.jsp","","mainFrame");   
  10.  tree.add("114","11","A-5","/.jsp","","mainFrame");   
  11.  tree.add("115","11","A-6","/.jsp","","mainFrame");   
  12.     
  13. tree.add("12","1","B","","","","","",true);   
  14.  tree.add("121","12","B-1","javascript:调用本页内的js函数","","mainFrame");   
  15.  tree.add("122","12","B-2");   
  16. tree.add("13","1","C","","","","","",true);   
  17.  tree.add("131","13","C-1","javascript:void(0)","","mainFrame");   
  18.  tree.add("132","13","C-2","javascript:void(0)","","mainFrame");   
  19.  tree.add("133","13","C-3","javascript:void(0)","","mainFrame");   
  20. tree.add("14","1","D","","","","","",true);   
  21.  tree.add("141","14","D-1","javascript:void(0)","","mainFrame");   
  22. document.write(tree);   
  23. </script>  
[javascript] view plaincopyprint?
  1. <script type="text/javascript" src="/myMobanGis/pub/js/dtree.js"></script>  
  2. <script type="text/javascript">  
  3. tree = new dTree('tree');  
  4. tree.add("1","-1","京津","","","","","",true);  
  5. tree.add("11","1","A","","","","","",true);  
  6.  tree.add("110","11","A-1","content.jsp?moduleName=XXX","","mainFrame");  
  7.  tree.add("111","11","A-2","javascript:void(0)","","链接在哪里显示");  
  8.  tree.add("112","11","A-3","javascript:void(0)","","mainFrame");  
  9.  tree.add("113","11","A-4","/.jsp","","mainFrame");  
  10.  tree.add("114","11","A-5","/.jsp","","mainFrame");  
  11.  tree.add("115","11","A-6","/.jsp","","mainFrame");  
  12.    
  13. tree.add("12","1","B","","","","","",true);  
  14.  tree.add("121","12","B-1","javascript:调用本页内的js函数","","mainFrame");  
  15.  tree.add("122","12","B-2");  
  16. tree.add("13","1","C","","","","","",true);  
  17.  tree.add("131","13","C-1","javascript:void(0)","","mainFrame");  
  18.  tree.add("132","13","C-2","javascript:void(0)","","mainFrame");  
  19.  tree.add("133","13","C-3","javascript:void(0)","","mainFrame");  
  20. tree.add("14","1","D","","","","","",true);  
  21.  tree.add("141","14","D-1","javascript:void(0)","","mainFrame");  
  22. document.write(tree);  
  23. </script>  

 说明：这是静态的代码，动态的可用循环加入。其他 tree.add(id,pid,name,url,"","","","",true);

 

三：css文件的注解
1:dtree.css

Css代码 复制代码
  1. .dtree {//定义目录树节点的字体，字号，颜色   
  2.  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;   
  3.  font-size: 12px;   
  4.  color: #006600;   
  5.  white-space: nowrap;   
  6. }   
  7. .dtree img {//定义选用节点图标的样式，位置   
  8.  border: 0px;   
  9.  vertical-align: middle;   
  10. }   
  11. .dtree a {//   
  12.  color: #006600;   
  13.  text-decoration: none;   
  14. }   
  15. .dtree a.node, .dtree a.nodeSel {   
  16.  white-space: nowrap;   
  17.  padding: 0px 0px 0px 0px;   
  18. }   
  19. .dtree a.node:hover, .dtree a.nodeSel:hover {   
  20.  color: #006600;   
  21.  text-decoration: none;   
  22. }   
  23. .dtree a.nodeSel {   
  24.  background-color: #c0d2ec;   
  25. }   
  26. .dtree .clip {   
  27.  overflow: hidden;   
  28. }  
[css] view plaincopyprint?
  1. .dtree {//定义目录树节点的字体，字号，颜色  
  2.  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;  
  3.  font-size: 12px;  
  4.  color: #006600;  
  5.  white-space: nowrap;  
  6. }  
  7. .dtree img {//定义选用节点图标的样式，位置  
  8.  border: 0px;  
  9.  vertical-align: middle;  
  10. }  
  11. .dtree a {//  
  12.  color: #006600;  
  13.  text-decoration: none;  
  14. }  
  15. .dtree a.node, .dtree a.nodeSel {  
  16.  white-space: nowrap;  
  17.  padding: 0px 0px 0px 0px;  
  18. }  
  19. .dtree a.node:hover, .dtree a.nodeSel:hover {  
  20.  color: #006600;  
  21.  text-decoration: none;  
  22. }  
  23. .dtree a.nodeSel {  
  24.  background-color: #c0d2ec;  
  25. }  
  26. .dtree .clip {  
  27.  overflow: hidden;  
  28. }  

 

Javascript代码 复制代码
  1. a = new dTree('a');   
  2. a.config.useStatusText=true;   
  3. a.config.closeSameLevel=true;   
  4. a.config.useCookies=false;   
  5. a.add(0,-1,'Tree example','javascript: void(0);');   
  6. a.add(1, 0,'Node 1','javascript:void(0);');   
  7. a.add(2, 1,'Node 2','javascript:void(0);');   
  8. a.add(3, 1,'Node 3','javascript:void(0);');   
  9. a.add(4, 0,'Node 4','javascript:void(0);');   
  10. a.add(5, 4,'Node 5','javascript:void(0);');   
  11. a.add(6, 4,'Node 6','javascript:void(0);');   
  12. a.add(7, 2,'Node 7','javascript:void(0);');   
  13. a.add(8, 6,'Node 8','javascript:void(0);');   
  14. a.add(9, 1,'Node 9','javascript:void(0);');   
  15. a.add(10, 2,'Node 10','javascript:void(0);');   
  16. a.add(11, 8,'Node 11','javascript:void(0);');   
  17. a.add(12, 2,'Node 12','javascript:void(0);');   
  18. a.add(13, 9,'Node 13','javascript:void(0);');   
  19. a.add(14, 4,'Node 14','javascript:void(0);');   
  20. a.add(15, 2,'Node 15','javascript:void(0);');   
  21. a.add(16, 1,'Node 16','javascript:void(0);');   
  22. a.add(17, 4,'Node 17','javascript:void(0);');   
  23. a.add(18, 6,'Node 18','javascript:void(0);');   
  24. a.add(19, 7,'Node 19','javascript:void(0);');   
  25. document.write(a);   
  26.             
  27.    
[Javascript] view plaincopyprint?
  1. a = new dTree('a');  
  2. a.config.useStatusText=true;  
  3. a.config.closeSameLevel=true;  
  4. a.config.useCookies=false;  
  5. a.add(0,-1,'Tree example','javascript: void(0);');  
  6. a.add(1, 0,'Node 1','javascript:void(0);');  
  7. a.add(2, 1,'Node 2','javascript:void(0);');  
  8. a.add(3, 1,'Node 3','javascript:void(0);');  
  9. a.add(4, 0,'Node 4','javascript:void(0);');  
  10. a.add(5, 4,'Node 5','javascript:void(0);');  
  11. a.add(6, 4,'Node 6','javascript:void(0);');  
  12. a.add(7, 2,'Node 7','javascript:void(0);');  
  13. a.add(8, 6,'Node 8','javascript:void(0);');  
  14. a.add(9, 1,'Node 9','javascript:void(0);');  
  15. a.add(10, 2,'Node 10','javascript:void(0);');  
  16. a.add(11, 8,'Node 11','javascript:void(0);');  
  17. a.add(12, 2,'Node 12','javascript:void(0);');  
  18. a.add(13, 9,'Node 13','javascript:void(0);');  
  19. a.add(14, 4,'Node 14','javascript:void(0);');  
  20. a.add(15, 2,'Node 15','javascript:void(0);');  
  21. a.add(16, 1,'Node 16','javascript:void(0);');  
  22. a.add(17, 4,'Node 17','javascript:void(0);');  
  23. a.add(18, 6,'Node 18','javascript:void(0);');  
  24. a.add(19, 7,'Node 19','javascript:void(0);');  
  25. document.write(a);  
  26.            
  27.    

      tree2.jsp   demo中的一个jsp页面. 静态的生成一棵树. (二级节点)

       

Java代码 复制代码
  1. <%@ page language="java" pageEncoding="utf-8"%>   
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">   
  3. <html>   
  4.     <head>   
  5.         <title>树形结构_____普通生成树的方式</title>   
  6.         <link rel="stylesheet" href="dtree.css" type="text/css"></link>   
  7.         <script type="text/javascript" src="dtree.js"></script>   
  8.         <script>   
  9.                /*    
  10.                     tree.add(id,pid,name,url,title,target,icon,iconOpen,open); 
  11.                     id        ：节点自身的id 
  12.                     pid       ：节点的父节点的id 
  13.                     name      ：节点显示在页面上的名称 
  14.                     url       ：节点的链接地址 
  15.                     title     ：鼠标放在节点上所出现的提示信息 
  16.                     target    ：节点链接所打开的目标frame（如框架目标mainFrame或是_blank,_self之类） 
  17.                     icon      ：节点关闭时的显示图片的路径 
  18.                     iconOpen  ：节点打开时的显示图片的路径 
  19.                     open      ：布尔型，节点是否打开（默认为false） 
  20.                     ------------------------------------------------ 
  21.                     东城区、西城区、崇文区、宣武区、朝阳区、丰台区、石景山区、 
  22.                     海淀区、门头沟区、房山区、通州区、顺义区、 昌平区、 
  23.                    大兴区、怀柔区、平谷区 、 密云县、延庆县 
  24.                    ------------------------------------------------ 
  25.                 */  
  26.         </script>   
  27.                 <script type="text/javascript">   
  28.                  tree = new dTree('tree');//创建一个对象.  
  29.                  tree.add("1","-1","中国","","","","","",false);   
  30.                  tree.add("11","1","北京","","","","","",false);   
  31.                  tree.add("110","11","东城区","连接地址可以从数据库里面动态查询出来..","东城区","打开目标位置");   
  32.                  tree.add("111","11","西城区","连接地址可以从数据库里面动态查询出来..","","链接在哪里显示");   
  33.                  tree.add("112","11","崇文区","连接地址可以从数据库里面动态查询出来..","","mainFrame");   
  34.                  tree.add("113","11","宣武区","","","_blank");   
  35.                  tree.add("114","11","朝阳区","/.jsp","","mainFrame");   
  36.                  tree.add("115","11","丰台区","/.jsp","","mainFrame");   
  37.                  tree.add("116","11","石景山区","/.jsp","","mainFrame");   
  38.                  tree.add("117","11","海淀区","/.jsp","","mainFrame");   
  39.                  tree.add("118","11","门头沟区","/.jsp","","mainFrame");   
  40.                  tree.add("119","11","房山区","/.jsp","","mainFrame");   
  41.                  tree.add("120","11","通州区","/.jsp","","mainFrame");   
  42.                  tree.add("121","11","顺义区","/.jsp","","mainFrame");    
  43.                  tree.add("122","11","昌平区","/.jsp","","mainFrame");   
  44.                  tree.add("123","11","大兴区","/.jsp","","mainFrame");   
  45.                  tree.add("124","11","怀柔区","/.jsp","","mainFrame");   
  46.                  tree.add("125","11","平谷区","/.jsp","","mainFrame");   
  47.                  tree.add("126","11","延庆县","/.jsp","","mainFrame");   
  48.                  tree.add("127","11","密云县","/.jsp","","mainFrame");   
  49.                  //==================================================  
  50.                  tree.add("12","1","湖南","","","","","",false);   
  51.                  tree.add("121","12","株洲","javascript:调用本页内的js函数","","mainFrame");   
  52.                  tree.add("122","12","长沙");   
  53.                 //====================================================  
  54.                  tree.add("13","1","湖北","","","","","",false);   
  55.                  tree.add("131","13","武汉","javascript:void()","","mainFrame");   
  56.                  tree.add("132","13","宜昌","javascript:void()","","mainFrame");   
  57.                  tree.add("133","13","孝感","javascript:void()","","mainFrame");   
  58.                  //===================================================     
  59.                  tree.add("14","1","广东","","","","","",false);   
  60.                  tree.add("141","14","佛山","javascript:void()","","mainFrame");   
  61.                  document.write(tree);   
  62.                 </script>   
  63.     </head>   
  64.     <body>   
  65.     </body>   
  66. </html>  
[java] view plaincopyprint?
  1. <%@ page language="java" pageEncoding="utf-8"%>  
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  3. <html>  
  4.     <head>  
  5.         <title>树形结构_____普通生成树的方式</title>  
  6.         <link rel="stylesheet" href="dtree.css" type="text/css"></link>  
  7.         <script type="text/javascript" src="dtree.js"></script>  
  8.         <script>  
  9.                /*    
  10.                     tree.add(id,pid,name,url,title,target,icon,iconOpen,open); 
  11.                     id        ：节点自身的id 
  12.                     pid       ：节点的父节点的id 
  13.                     name      ：节点显示在页面上的名称 
  14.                     url       ：节点的链接地址 
  15.                     title     ：鼠标放在节点上所出现的提示信息 
  16.                     target    ：节点链接所打开的目标frame（如框架目标mainFrame或是_blank,_self之类） 
  17.                     icon      ：节点关闭时的显示图片的路径 
  18.                     iconOpen  ：节点打开时的显示图片的路径 
  19.                     open      ：布尔型，节点是否打开（默认为false） 
  20.                     ------------------------------------------------ 
  21.                     东城区、西城区、崇文区、宣武区、朝阳区、丰台区、石景山区、 
  22.                     海淀区、门头沟区、房山区、通州区、顺义区、 昌平区、 
  23.                    大兴区、怀柔区、平谷区 、 密云县、延庆县 
  24.                    ------------------------------------------------ 
  25.                 */  
  26.         </script>  
  27.                 <script type="text/javascript">  
  28.                  tree = new dTree('tree');//创建一个对象.  
  29.                  tree.add("1","-1","中国","","","","","",false);  
  30.                  tree.add("11","1","北京","","","","","",false);  
  31.                  tree.add("110","11","东城区","连接地址可以从数据库里面动态查询出来..","东城区","打开目标位置");  
  32.                  tree.add("111","11","西城区","连接地址可以从数据库里面动态查询出来..","","链接在哪里显示");  
  33.                  tree.add("112","11","崇文区","连接地址可以从数据库里面动态查询出来..","","mainFrame");  
  34.                  tree.add("113","11","宣武区","","","_blank");  
  35.                  tree.add("114","11","朝阳区","/.jsp","","mainFrame");  
  36.                  tree.add("115","11","丰台区","/.jsp","","mainFrame");  
  37.                  tree.add("116","11","石景山区","/.jsp","","mainFrame");  
  38.                  tree.add("117","11","海淀区","/.jsp","","mainFrame");  
  39.                  tree.add("118","11","门头沟区","/.jsp","","mainFrame");  
  40.                  tree.add("119","11","房山区","/.jsp","","mainFrame");  
  41.                  tree.add("120","11","通州区","/.jsp","","mainFrame");  
  42.                  tree.add("121","11","顺义区","/.jsp","","mainFrame");   
  43.                  tree.add("122","11","昌平区","/.jsp","","mainFrame");  
  44.                  tree.add("123","11","大兴区","/.jsp","","mainFrame");  
  45.                  tree.add("124","11","怀柔区","/.jsp","","mainFrame");  
  46.                  tree.add("125","11","平谷区","/.jsp","","mainFrame");  
  47.                  tree.add("126","11","延庆县","/.jsp","","mainFrame");  
  48.                  tree.add("127","11","密云县","/.jsp","","mainFrame");  
  49.                  //==================================================  
  50.                  tree.add("12","1","湖南","","","","","",false);  
  51.                  tree.add("121","12","株洲","javascript:调用本页内的js函数","","mainFrame");  
  52.                  tree.add("122","12","长沙");  
  53.                 //====================================================  
  54.                  tree.add("13","1","湖北","","","","","",false);  
  55.                  tree.add("131","13","武汉","javascript:void()","","mainFrame");  
  56.                  tree.add("132","13","宜昌","javascript:void()","","mainFrame");  
  57.                  tree.add("133","13","孝感","javascript:void()","","mainFrame");  
  58.                  //===================================================     
  59.                  tree.add("14","1","广东","","","","","",false);  
  60.                  tree.add("141","14","佛山","javascript:void()","","mainFrame");  
  61.                  document.write(tree);  
  62.                 </script>  
  63.     </head>  
  64.     <body>  
  65.     </body>  
  66. </html>  

 

         不罗嗦啦..上面的只是让你大概了解一下.dtree怎么用.

 

    dtree+JQuery动态生成树.思路其实很简单...  首先把树的节点信息存储到数据库,然后在servlet或jsp中获取数据库表中的数据,把这些信息写成在xml文件中.然后界面jsp页面通过JQuery实现对改servlet的请求.并且回调方法中接受xml数据对象.并且遍历xml文件,取得xml文件中的节点的属性或文本数据.再循环的对dtree添加节点.。

 

1 . 在 MYSQL 中的test数据库中创建表.tree_table. 

     SQL语句.

Sql代码 复制代码
  1. tree_table  CREATE TABLE `tree_table` (                       
  2.               `id` int(11) NOT NULL auto_increment,           
  3.               `nodeId` varchar(12) NOT NULL  ,       
  4.               `parentId` varchar(12) NOT NULL  ,     
  5.               `hrefAddress` varchar(85)  ,           
  6.               `nodeName` varchar(20)  ,              
  7.               PRIMARY KEY  (`id`)                             
  8.             ) ENGINE=InnoDB DEFAULT CHARSET=gbk      
[SQL] view plaincopyprint?
  1. tree_table  CREATE TABLE `tree_table` (                      
  2.               `id` int(11) NOT NULL auto_increment,          
  3.               `nodeId` varchar(12) NOT NULL  ,      
  4.               `parentId` varchar(12) NOT NULL  ,    
  5.               `hrefAddress` varchar(85)  ,          
  6.               `nodeName` varchar(20)  ,             
  7.               PRIMARY KEY  (`id`)                            
  8.             ) ENGINE=InnoDB DEFAULT CHARSET=gbk      

 

2.连接数据库的类.主要是读取表中的数据.

       

Java代码 复制代码
  1. package com.dao;   
  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.util.ArrayList;   
  9.   
  10. public class DaoTest {   
  11.     Connection con = null;   
  12.   
  13.     public Connection getConnection() {   
  14.         Connection conn = null;   
  15.         String url = "jdbc:mysql://localhost/test?useUnicode=true&amp;characterEncoding=gbk";   
  16.         String user = "root";   
  17.         String password = "admin";   
  18.         try {   
  19.             if (conn == null) {   
  20.                 Class.forName("com.mysql.jdbc.Driver").newInstance();   
  21.                 conn = DriverManager.getConnection(url, user, password);   
  22.             }   
  23.         } catch (Exception e) {   
  24.             System.out.println("连接失败");   
  25.             return null;   
  26.         } finally {   
  27.             url = null;   
  28.             user = null;   
  29.             password = null;   
  30.         }   
  31.         return conn;   
  32.     }   
  33.   
  34.     public ArrayList<Nodes> getNodeInfo() {   
  35.         String sql = "select nodeId ,parentId ,hrefAddress ,nodeName from tree_table order by id ";   
  36.         PreparedStatement pre = null;   
  37.         Connection conn = null;   
  38.         conn = getConnection();   
  39.         ResultSet rs = null;   
  40.         ArrayList<Nodes> list = new ArrayList<Nodes>();   
  41.         try {   
  42.             pre = conn.prepareStatement(sql);   
  43.             rs =pre.executeQuery();   
  44.             while (rs.next()){   
  45.                 Nodes node = new Nodes();   
  46.                 node.setHrefAddress(rs.getString("hrefAddress"));   
  47.                 node.setNodeId(rs.getString("nodeId"));   
  48.                 node.setParentId(rs.getString("parentId"));   
  49.                 node.setNodeName(rs.getString("nodeName"));   
  50.                 list.add(node);   
  51.             }   
  52.             rs.close();   
  53.             pre.close();   
  54.             conn.close();   
  55.         } catch (SQLException e) {   
  56.             e.printStackTrace();   
  57.         }finally{   
  58.              pre = null;   
  59.              conn = null;   
  60.              rs = null;   
  61.         }   
  62.         return list;   
  63.     }   
  64.   
  65. }  
[java] view plaincopyprint?
  1. package com.dao;  
  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.util.ArrayList;  
  9.   
  10. public class DaoTest {  
  11.     Connection con = null;  
  12.   
  13.     public Connection getConnection() {  
  14.         Connection conn = null;  
  15.         String url = "jdbc:mysql://localhost/test?useUnicode=true&amp;characterEncoding=gbk";  
  16.         String user = "root";  
  17.         String password = "admin";  
  18.         try {  
  19.             if (conn == null) {  
  20.                 Class.forName("com.mysql.jdbc.Driver").newInstance();  
  21.                 conn = DriverManager.getConnection(url, user, password);  
  22.             }  
  23.         } catch (Exception e) {  
  24.             System.out.println("连接失败");  
  25.             return null;  
  26.         } finally {  
  27.             url = null;  
  28.             user = null;  
  29.             password = null;  
  30.         }  
  31.         return conn;  
  32.     }  
  33.   
  34.     public ArrayList<Nodes> getNodeInfo() {  
  35.         String sql = "select nodeId ,parentId ,hrefAddress ,nodeName from tree_table order by id ";  
  36.         PreparedStatement pre = null;  
  37.         Connection conn = null;  
  38.         conn = getConnection();  
  39.         ResultSet rs = null;  
  40.         ArrayList<Nodes> list = new ArrayList<Nodes>();  
  41.         try {  
  42.             pre = conn.prepareStatement(sql);  
  43.             rs =pre.executeQuery();  
  44.             while (rs.next()){  
  45.                 Nodes node = new Nodes();  
  46.                 node.setHrefAddress(rs.getString("hrefAddress"));  
  47.                 node.setNodeId(rs.getString("nodeId"));  
  48.                 node.setParentId(rs.getString("parentId"));  
  49.                 node.setNodeName(rs.getString("nodeName"));  
  50.                 list.add(node);  
  51.             }  
  52.             rs.close();  
  53.             pre.close();  
  54.             conn.close();  
  55.         } catch (SQLException e) {  
  56.             e.printStackTrace();  
  57.         }finally{  
  58.              pre = null;  
  59.              conn = null;  
  60.              rs = null;  
  61.         }  
  62.         return list;  
  63.     }  
  64.   
  65. }  

 3. 节点。JAVABEAN.类.

   

Java代码 复制代码
  1. package com.dao;   
  2.   
  3. public class Nodes {   
  4.     private int id;   
  5.     private String nodeId;   
  6.     private String parentId;   
  7.     private String hrefAddress;   
  8.     private String nodeName;   
  9.   
  10.     public int getId() {   
  11.         return id;   
  12.     }   
  13.   
  14.     public void setId(int id) {   
  15.         this.id = id;   
  16.     }   
  17.   
  18.     public String getNodeId() {   
  19.         return nodeId;   
  20.     }   
  21.   
  22.     public void setNodeId(String nodeId) {   
  23.         this.nodeId = nodeId;   
  24.     }   
  25.   
  26.     public String getParentId() {   
  27.         return parentId;   
  28.     }   
  29.   
  30.     public void setParentId(String parentId) {   
  31.         this.parentId = parentId;   
  32.     }   
  33.   
  34.     public String getHrefAddress() {   
  35.         return hrefAddress;   
  36.     }   
  37.   
  38.     public void setHrefAddress(String hrefAddress) {   
  39.         this.hrefAddress = hrefAddress;   
  40.     }   
  41.   
  42.     public String getNodeName() {   
  43.         return nodeName;   
  44.     }   
  45.   
  46.     public void setNodeName(String nodeName) {   
  47.         this.nodeName = nodeName;   
  48.     }   
  49.   
  50. }  
[java] view plaincopyprint?
  1. package com.dao;  
  2.   
  3. public class Nodes {  
  4.     private int id;  
  5.     private String nodeId;  
  6.     private String parentId;  
  7.     private String hrefAddress;  
  8.     private String nodeName;  
  9.   
  10.     public int getId() {  
  11.         return id;  
  12.     }  
  13.   
  14.     public void setId(int id) {  
  15.         this.id = id;  
  16.     }  
  17.   
  18.     public String getNodeId() {  
  19.         return nodeId;  
  20.     }  
  21.   
  22.     public void setNodeId(String nodeId) {  
  23.         this.nodeId = nodeId;  
  24.     }  
  25.   
  26.     public String getParentId() {  
  27.         return parentId;  
  28.     }  
  29.   
  30.     public void setParentId(String parentId) {  
  31.         this.parentId = parentId;  
  32.     }  
  33.   
  34.     public String getHrefAddress() {  
  35.         return hrefAddress;  
  36.     }  
  37.   
  38.     public void setHrefAddress(String hrefAddress) {  
  39.         this.hrefAddress = hrefAddress;  
  40.     }  
  41.   
  42.     public String getNodeName() {  
  43.         return nodeName;  
  44.     }  
  45.   
  46.     public void setNodeName(String nodeName) {  
  47.         this.nodeName = nodeName;  
  48.     }  
  49.   
  50. }  

 4.创建一个Serlvet 来生成xml文件.

          注意: response.setContentType("text/xml;charset=utf-8");

 

Java代码 复制代码
  1. package com.handler;   
  2.   
  3. import java.io.IOException;   
  4. import java.io.PrintWriter;   
  5. import java.util.ArrayList;   
  6.   
  7. import javax.servlet.ServletException;   
  8. import javax.servlet.http.HttpServlet;   
  9. import javax.servlet.http.HttpServletRequest;   
  10. import javax.servlet.http.HttpServletResponse;   
  11.   
  12. import com.dao.DaoTest;   
  13. import com.dao.Nodes;   
  14. public class NodesPrint extends HttpServlet {   
  15.     private static final long serialVersionUID = 1L;   
  16.     public void doGet(HttpServletRequest request, HttpServletResponse response)   
  17.             throws ServletException, IOException {   
  18.                  doPost(request, response);   
  19.     }   
  20.     public void doPost(HttpServletRequest request, HttpServletResponse response)   
  21.             throws ServletException, IOException {   
  22.            request.setCharacterEncoding("utf-8");   
  23.            response.setContentType("text/xml;charset=utf-8");   
  24.            PrintWriter out = response.getWriter();   
  25.            DaoTest test = new DaoTest();   
  26.            ArrayList<Nodes> list=  test.getNodeInfo();   
  27.             if(list!=null&&list.size()>0){   
  28.                 out.println("<?xml version=/"1.0/" encoding=/"UTF-8/"?>");   
  29.                 out.println("<nodes>");   
  30.                 for(int i=0;i<list.size();i++){   
  31.                     Nodes node = list.get(i);   
  32.                     out.println("<node nodeId='"+node.getNodeId()+"' parentId='"+node.getParentId()+"' hrefAddress='"+node.getHrefAddress()+"'>"+node.getNodeName()+"</node>");   
  33.                 }   
  34.                 out.println("</nodes>");   
  35.             }   
  36.     }   
  37. }  
[java] view plaincopyprint?
  1. package com.handler;  
  2.   
  3. import java.io.IOException;  
  4. import java.io.PrintWriter;  
  5. import java.util.ArrayList;  
  6.   
  7. import javax.servlet.ServletException;  
  8. import javax.servlet.http.HttpServlet;  
  9. import javax.servlet.http.HttpServletRequest;  
  10. import javax.servlet.http.HttpServletResponse;  
  11.   
  12. import com.dao.DaoTest;  
  13. import com.dao.Nodes;  
  14. public class NodesPrint extends HttpServlet {  
  15.     private static final long serialVersionUID = 1L;  
  16.     public void doGet(HttpServletRequest request, HttpServletResponse response)  
  17.             throws ServletException, IOException {  
  18.                  doPost(request, response);  
  19.     }  
  20.     public void doPost(HttpServletRequest request, HttpServletResponse response)  
  21.             throws ServletException, IOException {  
  22.            request.setCharacterEncoding("utf-8");  
  23.            response.setContentType("text/xml;charset=utf-8");  
  24.            PrintWriter out = response.getWriter();  
  25.            DaoTest test = new DaoTest();  
  26.            ArrayList<Nodes> list=  test.getNodeInfo();  
  27.             if(list!=null&&list.size()>0){  
  28.                 out.println("<?xml version=/"1.0/" encoding=/"UTF-8/"?>");  
  29.                 out.println("<nodes>");  
  30.                 for(int i=0;i<list.size();i++){  
  31.                     Nodes node = list.get(i);  
  32.                     out.println("<node nodeId='"+node.getNodeId()+"' parentId='"+node.getParentId()+"' hrefAddress='"+node.getHrefAddress()+"'>"+node.getNodeName()+"</node>");  
  33.                 }  
  34.                 out.println("</nodes>");  
  35.             }  
  36.     }  
  37. }  

 5. 将dtree.js 和dtree.css，jquery.js, img文件夹.放在WebRoot下面.(工程的根目录)

 6.  编写我们的tree.jsp页面.

      

Java代码 复制代码
  1. <%@ page language="java" pageEncoding="utf-8"%>   
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">   
  3. <html>   
  4.  <head>   
  5.   <title>树形结构___ajax请求方式</title>   
  6.   <script type="text/javascript" src="dtree.js"></script>   
  7.   <script type="text/javascript" src="jquery.js"></script>   
  8.   <link rel="stylesheet" href="dtree.css" type="text/css"></link>   
  9.   <script type="text/javascript">   
  10.    tree = new dTree('tree');//创建一个对象.  
  11.    $.ajax({    
  12.     <A href="/admin/blogs/350056/'NodesPrint'">url:'NodesPrint'</A>,    
  13.     type:'post', //数据发送方式   
  14.     dataType:'xml', //接受数据格式   
  15.     error:function(json){   
  16.              alert( "not lived!");   
  17.        },   
  18.     async: false ,//同步方式  
  19.     success: function(xml){   
  20.          $(xml).find("node").each(function(){    
  21.         var nodeId=$(this).attr("nodeId");     
  22.          var parentId=$(this).attr("parentId");     
  23.         var hrefAddress=$(this).attr("hrefAddress");     
  24.         var nodeName=$(this).text();    
  25.         tree.add(nodeId,parentId,nodeName,hrefAddress,"","","","",false);   
  26.                         });   
  27.            }   
  28.      });   
  29.         document.write(tree);   
  30.   </script>   
  31.  </head>   
  32.  <body>   
  33.  </body>   
  34. </html>  
注：个人技术积累，转载自：http://blog.csdn.net/braddoris/article/details/5993279
珍妮曲奇授权的淘宝店 珍妮曲奇授权的淘宝店
原创粉丝点击
热门IT博客
淘宝图片侵权淘宝图片侵权
淘宝童装店代运营淘宝童装店代运营
优化武警部队新闻
java web权限管理实例
淘宝店家投诉
java语言编程教程
电影里翻译软件
财经杂志 知乎
windows界面开发工具
全国空气质量监测软件
淘宝透明睡衣买家秀
udp攻击21端口
可可宝贝软件下载
nginx ab压力测试工具
知画的歌
文妥财富网络借贷
淘宝店运营计划书
淘宝买万艾可怎么购买
nba关注软件
淘宝网有英文版吗
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 平静 平静反义词 平静近义词 平静之剑 平静的湖 和平静英 平静的拳头 平静意思 平静的意思 平静有思 平静图片 和平静音 平静英文 平静的英文 内心平静 平静的图片 平静自身 平静的什么 平静的拼音 平静的湖面 平静的 和平静 平静的反义词 平静的近义词 平静图片看几秒出鬼 晚上心慌平静不下来无法入睡 平静之剑任务 湖面很平静改为比喻句 让心回归平静图片 心情平静的优雅句子 形容心情平静的成语 平静的意思是什么 平静是什么意思 平顺 平顺县 平顺旅游 平顺通天峡 山西平顺县属于哪个市 平高电气 隆平高料 平高集团

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里