dtree通过数据库动态生成树

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" /> 
         

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

Javascript代码 复制代码
  1.   
  2.  


说明:这是静态的代码,动态的可用循环加入。其他 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;  
.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.   

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

       

Java代码 复制代码
  1. <%@ page language="java" pageEncoding="utf-8"%>  
  2. "-//W3C//DTD HTML 4.01 Transitional//EN">  
  3.   
  4.       
  5.         树形结构_____普通生成树的方式  
  6.         "stylesheet" href="dtree.css" type="text/css">  
  7.           
  8.           
  9.                   
  10.       
  11.       
  12.       
  13.  
<%@ page language="java" pageEncoding="utf-8"%>



树形结构_____普通生成树的方式








         不罗嗦啦..上面的只是让你大概了解一下.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     

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&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 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 list = new ArrayList();  
  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.  
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 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 list = new ArrayList();
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.  
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 list=  test.getNodeInfo();  
  27.             if(list!=null&&list.size()>0){  
  28.                 out.println("");  
  29.                 out.println("");  
  30.                 for(int i=0;i
  31.                     Nodes node = list.get(i);  
  32.                     out.println(""+node.getNodeName()+"");  
  33.                 }  
  34.                 out.println("");  
  35.             }  
  36.     }  
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 list=  test.getNodeInfo();
if(list!=null&&list.size()>0){
out.println("");
out.println("");
for(int i=0;i"+node.getNodeName()+"");
}
out.println("");
}
}
}

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

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

      

Java代码 复制代码
  1. <%@ page language="java" pageEncoding="utf-8"%>  
  2. "-//W3C//DTD HTML 4.01 Transitional//EN">  
  3.   
  4.   
  5.   树形结构___ajax请求方式  
  6.     
  7.     
  8.   "stylesheet" href="dtree.css" type="text/css">  
  9.     
  10.   
  11.   
  12.   
  13.  
<%@ page language="java" pageEncoding="utf-8"%>


 
  树形结构___ajax请求方式
  
  
  
  
 
 
 

你可能感兴趣的:(dtree通过数据库动态生成树)