Dtree+Jquery動態生成樹節點.

最近有朋友問我一個動態生成樹怎么做.后來就用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" />  

         <link href="/jingjindatabase/pub/css/a.css" rel="stylesheet" type="text/css" />
<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>  

<script type="text/javascript" src="/myMobanGis/pub/js/dtree.js"></script>
<script type="text/javascript">
tree = new dTree('tree');
tree.add("1","-1","京津","","","","","",true);
tree.add("11","1","A","","","","","",true);
tree.add("110","11","A-1","content.jsp?moduleName=XXX","","mainFrame");
tree.add("111","11","A-2","javascript:void(0)","","鏈接在哪里顯示");
tree.add("112","11","A-3","javascript:void(0)","","mainFrame");
tree.add("113","11","A-4","/.jsp","","mainFrame");
tree.add("114","11","A-5","/.jsp","","mainFrame");
tree.add("115","11","A-6","/.jsp","","mainFrame");
tree.add("12","1","B","","","","","",true);
tree.add("121","12","B-1","javascript:調用本頁內的js函數","","mainFrame");
tree.add("122","12","B-2");
tree.add("13","1","C","","","","","",true);
tree.add("131","13","C-1","javascript:void(0)","","mainFrame");
tree.add("132","13","C-2","javascript:void(0)","","mainFrame");
tree.add("133","13","C-3","javascript:void(0)","","mainFrame");
tree.add("14","1","D","","","","","",true);
tree.add("141","14","D-1","javascript:void(0)","","mainFrame");
document.write(tree);
</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. }  

.dtree {//定義目錄樹節點的字體，字號，顏色
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #006600;
white-space: nowrap;
}
.dtree img {//定義選用節點圖標的樣式，位置
border: 0px;
vertical-align: middle;
}
.dtree a {//
color: #006600;
text-decoration: none;
}
.dtree a.node, .dtree a.nodeSel {
white-space: nowrap;
padding: 0px 0px 0px 0px;
}
.dtree a.node:hover, .dtree a.nodeSel:hover {
color: #006600;
text-decoration: none;
}
.dtree a.nodeSel {
background-color: #c0d2ec;
}
.dtree .clip {
overflow: hidden;
}

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.    

a = new dTree('a');
a.config.useStatusText=true;
a.config.closeSameLevel=true;
a.config.useCookies=false;
a.add(0,-1,'Tree example','javascript: void(0);');
a.add(1, 0,'Node 1','javascript:void(0);');
a.add(2, 1,'Node 2','javascript:void(0);');
a.add(3, 1,'Node 3','javascript:void(0);');
a.add(4, 0,'Node 4','javascript:void(0);');
a.add(5, 4,'Node 5','javascript:void(0);');
a.add(6, 4,'Node 6','javascript:void(0);');
a.add(7, 2,'Node 7','javascript:void(0);');
a.add(8, 6,'Node 8','javascript:void(0);');
a.add(9, 1,'Node 9','javascript:void(0);');
a.add(10, 2,'Node 10','javascript:void(0);');
a.add(11, 8,'Node 11','javascript:void(0);');
a.add(12, 2,'Node 12','javascript:void(0);');
a.add(13, 9,'Node 13','javascript:void(0);');
a.add(14, 4,'Node 14','javascript:void(0);');
a.add(15, 2,'Node 15','javascript:void(0);');
a.add(16, 1,'Node 16','javascript:void(0);');
a.add(17, 4,'Node 17','javascript:void(0);');
a.add(18, 6,'Node 18','javascript:void(0);');
a.add(19, 7,'Node 19','javascript:void(0);');
document.write(a);
 

      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>  

<%@ page language="java" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>樹形結構_____普通生成樹的方式</title>
<link rel="stylesheet" href="dtree.css" type="text/css"></link>
<script type="text/javascript" src="dtree.js"></script>
<script>
/*
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）
------------------------------------------------
東城區、西城區、崇文區、宣武區、朝陽區、豐臺區、石景山區、
海淀區、門頭溝區、房山區、通州區、順義區、 昌平區、
大興區、懷柔區、平谷區 、 密云縣、延慶縣
------------------------------------------------
*/
</script>
<script type="text/javascript">
tree = new dTree('tree');//創建一個對象.
tree.add("1","-1","中國","","","","","",false);
tree.add("11","1","北京","","","","","",false);
tree.add("110","11","東城區","連接地址可以從數據庫里面動態查詢出來..","東城區","打開目標位置");
tree.add("111","11","西城區","連接地址可以從數據庫里面動態查詢出來..","","鏈接在哪里顯示");
tree.add("112","11","崇文區","連接地址可以從數據庫里面動態查詢出來..","","mainFrame");
tree.add("113","11","宣武區","","","_blank");
tree.add("114","11","朝陽區","/.jsp","","mainFrame");
tree.add("115","11","豐臺區","/.jsp","","mainFrame");
tree.add("116","11","石景山區","/.jsp","","mainFrame");
tree.add("117","11","海淀區","/.jsp","","mainFrame");
tree.add("118","11","門頭溝區","/.jsp","","mainFrame");
tree.add("119","11","房山區","/.jsp","","mainFrame");
tree.add("120","11","通州區","/.jsp","","mainFrame");
tree.add("121","11","順義區","/.jsp","","mainFrame");
tree.add("122","11","昌平區","/.jsp","","mainFrame");
tree.add("123","11","大興區","/.jsp","","mainFrame");
tree.add("124","11","懷柔區","/.jsp","","mainFrame");
tree.add("125","11","平谷區","/.jsp","","mainFrame");
tree.add("126","11","延慶縣","/.jsp","","mainFrame");
tree.add("127","11","密云縣","/.jsp","","mainFrame");
//==================================================
tree.add("12","1","湖南","","","","","",false);
tree.add("121","12","株洲","javascript:調用本頁內的js函數","","mainFrame");
tree.add("122","12","長沙");
//====================================================
tree.add("13","1","湖北","","","","","",false);
tree.add("131","13","武漢","javascript:void()","","mainFrame");
tree.add("132","13","宜昌","javascript:void()","","mainFrame");
tree.add("133","13","孝感","javascript:void()","","mainFrame");
//===================================================
tree.add("14","1","廣東","","","","","",false);
tree.add("141","14","佛山","javascript:void()","","mainFrame");
document.write(tree);
</script>
</head>
<body>
</body>
</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      

tree_table  CREATE TABLE `tree_table` (
`id` int(11) NOT NULL auto_increment,
`nodeId` varchar(12) NOT NULL  ,
`parentId` varchar(12) NOT NULL  ,
`hrefAddress` varchar(85)  ,
`nodeName` varchar(20)  ,
PRIMARY KEY  (`id`)
) 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. }  

package com.dao;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
public class DaoTest {
Connection con = null;
public Connection getConnection() {
Connection conn = null;
String url = "jdbc:mysql://localhost/test?useUnicode=true&characterEncoding=gbk";
String user = "root";
String password = "admin";
try {
if (conn == null) {
Class.forName("com.mysql.jdbc.Driver").newInstance();
conn = DriverManager.getConnection(url, user, password);
}
} catch (Exception e) {
System.out.println("連接失敗");
return null;
} finally {
url = null;
user = null;
password = null;
}
return conn;
}
public ArrayList<Nodes> getNodeInfo() {
String sql = "select nodeId ,parentId ,hrefAddress ,nodeName from tree_table order by id ";
PreparedStatement pre = null;
Connection conn = null;
conn = getConnection();
ResultSet rs = null;
ArrayList<Nodes> list = new ArrayList<Nodes>();
try {
pre = conn.prepareStatement(sql);
rs =pre.executeQuery();
while (rs.next()){
Nodes node = new Nodes();
node.setHrefAddress(rs.getString("hrefAddress"));
node.setNodeId(rs.getString("nodeId"));
node.setParentId(rs.getString("parentId"));
node.setNodeName(rs.getString("nodeName"));
list.add(node);
}
rs.close();
pre.close();
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}finally{
pre = null;
conn = null;
rs = null;
}
return list;
}
}

 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. }  

package com.dao;
public class Nodes {
private int id;
private String nodeId;
private String parentId;
private String hrefAddress;
private String nodeName;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getNodeId() {
return nodeId;
}
public void setNodeId(String nodeId) {
this.nodeId = nodeId;
}
public String getParentId() {
return parentId;
}
public void setParentId(String parentId) {
this.parentId = parentId;
}
public String getHrefAddress() {
return hrefAddress;
}
public void setHrefAddress(String hrefAddress) {
this.hrefAddress = hrefAddress;
}
public String getNodeName() {
return nodeName;
}
public void setNodeName(String nodeName) {
this.nodeName = nodeName;
}
}

 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. }  

package com.handler;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.dao.DaoTest;
import com.dao.Nodes;
public class NodesPrint extends HttpServlet {
private static final long serialVersionUID = 1L;
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/xml;charset=utf-8");
PrintWriter out = response.getWriter();
DaoTest test = new DaoTest();
ArrayList<Nodes> list=  test.getNodeInfo();
if(list!=null&&list.size()>0){
out.println("<?xml version=\"1.0\" encoding=\"UTF-8\"?>");
out.println("<nodes>");
for(int i=0;i<list.size();i++){
Nodes node = list.get(i);
out.println("<node nodeId='"+node.getNodeId()+"' parentId='"+node.getParentId()+"' hrefAddress='"+node.getHrefAddress()+"'>"+node.getNodeName()+"</node>");
}
out.println("</nodes>");
}
}
}

 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="'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>  

<%@ page language="java" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <title>樹形結構___ajax請求方式</title>
  <script type="text/javascript" src="dtree.js"></script>
  <script type="text/javascript" src="jquery.js"></script>
  <link rel="stylesheet" href="dtree.css" type="text/css"></link>
  <script type="text/javascript">
   tree = new dTree('tree');//創建一個對象.
   $.ajax({
    ,
    type:'post', //數據發送方式
    dataType:'xml', //接受數據格式
    error:function(json){
             alert( "not lived!");
       },
    async: false ,//同步方式
    success: function(xml){
         $(xml).find("node").each(function(){
        var nodeId=$(this).attr("nodeId"); 
         var parentId=$(this).attr("parentId"); 
        var hrefAddress=$(this).attr("hrefAddress"); 
        var nodeName=$(this).text();
        tree.add(nodeId,parentId,nodeName,hrefAddress,"","","","",false);
                        });
           }
     });
        document.write(tree);
  </script>
 </head>
 <body>
 </body>
</html>