Dtree+jQuery实现动态树结构

最新推荐文章于 2019-03-12 16:43:40 发布
最新推荐文章于 2019-03-12 16:43:40 发布
阅读量1.3k 收藏
点赞数
分类专栏： jsp&servlet 文章标签： jquery javascript stylesheet tree string null
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/braddoris/article/details/5993282
版权

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.    

      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      

 

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&amp;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="/admin/blogs/350056/'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>  
braddoris
关注
专栏目录
dtree 的使用方法（详细教程）
weixin_40013850的博客
02-25 3077
1.导入dtree文件 2.定义一个 &lt;div class="dtree"&gt;&lt;/div&gt; 3.在输入JS代码 &lt;script type="text/javascript"&gt;      tree = new dTree('d');                  tree.add("1","-1","中国",&quot
使用dtree生成的树结构，ajax动态加载子节点后，如何绑定右键菜单续
u011019239的专栏
12-11 1389
var l_tree = document.getElementById("l_tree_d"); var tree = new dTree("tree");//创建一个对象.      tree.add(0,-1,'APISite',"javaScript:getMoreNodes('../treeNodes/NodesPrint','0');"+1+";"+0,'click me!
dtree的使用
06-27
dtree 的使用在页面中显示 树状结构图
Dtree+Jquery动态生成树节点例子《新手可参考》
xiejin2008的专栏
03-16 236
Dtree+Jquery动态生成树节点. 最近有朋友问我一个动态生成树怎么做.后来就用Dtree  js组件和Jquery实现了一个demo给他.现在贴出来给初学者做些参考.   1.先来介绍一下. dtree 的用法.(我引用了以前我收集的一篇文章.还比较详细,出处不记得啦).文章下面会附带dtree用法的例子.          Dtree目录树的总结                ...
dTree的用法
qq_38497266的博客
03-04 379
dtree主要方法介绍： add(parameters)：添加一个树节点，实际参数有9个add(id,pid,name,url,title,target,icon,iconOpen,open); 位置 参数别名 类型 功能 1 id int 节点自身的id(唯一) 2 pid int 节点的父节点id 3 name string 节点显示在页面上的名称 4 url string 节点的链接地...
dTree使用
小武的博客
03-12 2142
dTree使用 在官网上下载文件http://www.destroydrop.com/javascripts/tree/dtree.zip 引入dtree.css、dtree.js &lt;link rel="StyleSheet" href="dtree.css" type="text/css" /&gt; &lt;script type="text/javascript"...
dTree+jquery实现动态树形
03-16
标题 "dTree+jQuery 实现动态树形" 涉及到的是在Web开发中创建交互式、动态的树形结构的技术。dTree是一个用JavaScript编写的轻量级库，它与jQuery结合使用，可以方便地在网页上构建可展开和折叠的节点层次结构，...
Dtree+Jquery动态生成树节点.
05-28
综上所述，"Dtree+Jquery动态生成树节点"涉及到的技术点主要包括DTree插件的使用、jQuery操作、JSON数据处理以及动态交互的实现。通过这些技术，开发者可以构建出灵活、高效的树形结构视图，适应各种业务需求。
dtree+jquery动态生成树
07-26
`dtree`是基于jQuery的一个插件，它允许用户通过HTML元素来创建和管理树结构。这个插件提供了多种操作，如展开/折叠节点、添加/删除节点以及通过事件处理程序进行自定义交互。在网页中，`dtree`通常与服务器端的数据...
dtree+jquery 动态实现无限树形菜单 （包括增删改查）
07-16
本主题聚焦于使用dtree与jQuery库动态实现无限层级的树形菜单，并涵盖增删改查的基本功能。dtree是一款基于jQuery的插件，它提供了丰富的API和灵活的配置选项，使得在网页上创建交互式树形菜单变得简单易行。 首先...
DTree用法.pdf
10-08
轻量级js tree的使用， 详细的内容请看文档 详细的内容请看文档
dtree的使用方法详解
08-19
1. 从网上下载dtree控件。 2. 在Jbuilder中新建Web应用，命名为TreeLearing。 3. 解压缩dtree.rar包。 把dtree目录拷贝至TreeLearing应用中。 dtree目录下包括这些文件：example01.html 、 dtree.js 、 api.html 、 dtr ee.css 和img目录 注意：除了api.html之外，其它的文件都是必须拷贝的。只有这个api.html是对d tree控件的函数介绍。 4. 复制example01.html，并把粘贴后的文件重命名为Tree.jsp。 注意：dtree目录下的文件结构不要改变，否则树就不会正常显示 5. 在Web应用中指定首页为Tree.jsp页面。
jquery动态树
06-20
jquery动态树
jquery动态生成树
08-08
使用struts2，jquery，jquery插件treeview以及json动态生成一棵目录树，下载后可以直接运行，供学习使用
JQuery实例动态生成树
10-20
JQuery实例动态生成树 JQuery实例动态生成树 JQuery实例动态生成树 JQuery实例动态生成树 JQuery实例动态生成树
Dtree+Jquery动态生成树节点
04-25
DTree是一个基于JavaScript的树形插件，而JQuery是一个广泛使用的JavaScript库，两者结合可以简化前端开发工作，使树结构的创建更加高效和灵活。 首先，DTree的核心功能是动态生成树状结构，它能够帮助开发者以交互...
dtree使用手册以及简单的例子
12-18 627
 解压缩dtree.zip 包。  dtree目录下包括这些文件：example01.html 、 dtree.js 、 api.html 、 dtree.css 和img目录       注意：除了api.html之外，其它的文件都是必须拷贝的。api.html是dtree的函数介绍。  打开example01.html文件                  必须引用的两个文件。  生成树 节点
强大的Js树型控件Dtree使用详解
weixin_33976072的博客
01-15 1082
http://www.lmwlove.com/ac/ID868 在学习文章之前，要学会看官方网站http://destroydrop.com/javascripts/tree。从官方页面你能知道：dtree是什么、它的特性、它的源代码、它的帮助文档以及它的版本历史等等 常用方法add(parameters)：添加节点信息 Index Name Type Discriptio...
dtree常见用法与变形
weboof的博客
03-07 1415
dTree是个很方便在页面生成树的 js 控件,使用简单。如果你已经大致了解了dtree的使用方法，相信你很容易在页面上显示一颗树来。但是不同的项目需求，造成菜单树的各种变化，因此在介绍dTree的同时，本文着重讲述如何改造dTree，以达到为不同项目所用的目的。 dtree使用方式： ①引入dtree.js : dtree功能脚本 ②引入 dtree.css : 样式文件 ③引入 img文件
Dtree+jQuery动态树节点生成教程与用法详解
Dtree+jQuery动态树生成是一种基于JavaScript库实现的动态数据展示方式，用于创建可交互的目录树结构。这种技术在网页开发中尤其有用，尤其是在需要组织和展示层级关系数据时。以下是关于如何使用Dtree和jQuery进行...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值