dtree+jquery动态生成树节点...

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文件中不能有重复的样式
     

         <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之中

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

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

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

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

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

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

     SQL语句.

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

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

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");

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页面.

   <%@ page language="java" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
&nbsp;<head>
&nbsp;&nbsp;<title>树形结构___ajax请求方式</title>
&nbsp;&nbsp;<script type="text/javascript" src="dtree.js"></script>
&nbsp;&nbsp;<script type="text/javascript" src="jquery.js"></script>
&nbsp;&nbsp;<link rel="stylesheet" href="dtree.css" type="text/css"></link>
&nbsp;&nbsp;<script type="text/javascript">
&nbsp;&nbsp;&nbsp;tree = new dTree('tree');//创建一个对象.
&nbsp;&nbsp;&nbsp;$.ajax({
&nbsp;&nbsp;&nbsp;&nbsp;<A href="'NodesPrint'">url:'NodesPrint'</A>,
&nbsp;&nbsp;&nbsp;&nbsp;type:'post', //数据发送方式
&nbsp;&nbsp;&nbsp;&nbsp;dataType:'xml', //接受数据格式
&nbsp;&nbsp;&nbsp;&nbsp;error:function(json){
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; alert( "not lived!");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; },
&nbsp;&nbsp;&nbsp;&nbsp;async: false ,//同步方式
&nbsp;&nbsp;&nbsp;&nbsp;success: function(xml){
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $(xml).find("node").each(function(){
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var nodeId=$(this).attr("nodeId");&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var parentId=$(this).attr("parentId");&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var hrefAddress=$(this).attr("hrefAddress");&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var nodeName=$(this).text();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; tree.add(nodeId,parentId,nodeName,hrefAddress,"","","","",false);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; });
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }
&nbsp;&nbsp;&nbsp;&nbsp; });
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; document.write(tree);
&nbsp;&nbsp;</script>
&nbsp;</head>
&nbsp;<body>
&nbsp;</body>
</html>

    demo的结构图:

附件说明.

1.tree2.jsp.一个简单jsp。静态生成一个树结构

2.dtree的用法文章及其例子.

3.dtree+jquery动态生成树的demo_____DtreeTest