dTree+jquery生成树

痛定思痛。 2022-06-08 02:46 160阅读 0赞

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之中  
  
<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  
  
.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;  
\}  
  
   
  
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页面. 静态的生成一棵树. (二级节点)  
  
         
  
<%@ 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语句.  
  
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.连接数据库的类.主要是读取表中的数据.  
  
         
  
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>  
 <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(\{  
    url:'NodesPrint',  
    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>

原文引至

http://cache.baidu.com/c?m=9d78d513d99507ef0fba80394d48d83c5f12c2743da4cd083a91d65f93130007102db4ac275541598cd83a3a43f41841ebf734703007&p=c23fc54ad7c719fc57ebdb3b4d4a&user=baidu&fm=sc&query=dtree&qid=83f66f3b1e7ca7ab&p1=3