Dtree+Jquery动态生成树节点例子《新手可参考》

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

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

    demo的结构图:

           

    

 附件说明.

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

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

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

                

  

评论

6 楼 sunshan 2009-04-16  

干嘛不把节点直接存到xml中呢，xml和数据库差不多

5 楼 wesker0918 2009-04-15  

感谢楼主 非常有用

4 楼 xiejin2008 2009-03-26  

当节点数少时是发现不了问题的, 节点数多的时候还不仅仅是加载树的过程特别慢，直接就是一个致命的错误——堆栈溢出.

听说有另外一种技术叫做:  " 梅花雪树"

当然，如果树比较小，DTree在使用上还是很方便的，毕竟它的结构比梅花雪树要简单，也没有那些过多的资源和js脚本需要引入。

3 楼 zaowazong 2009-03-25  

本人dtree用的也比较多，谢谢楼主分享

dtree对于超过1000个节点的操作，速度变慢，效果很不理想，
请问有没有好的解决办法呢

2 楼 xyaoyuan 2009-03-25  

谢谢楼主，我看了您的东西，并且下载了。在此表示感谢。

1 楼 xiejin2008 2009-03-19  

  哈哈.太菜啦。还是，没人评论啦.看来都是高手呀..