- 浏览: 123679 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
xiejin2008:
最近1-2年比较流行的树组件 ztree
Dtree+Jquery动态生成树节点例子《新手可参考》 -
xiejin2008:
cyl5753 写道按照上面的步骤,访问https://127 ...
WebLogic Server 10.3 SSL配置及SSL协议传输的WebSevice调用 -
cyl5753:
按照上面的步骤,访问https://127.0.0.1:700 ...
WebLogic Server 10.3 SSL配置及SSL协议传输的WebSevice调用 -
wang1248912822:
[size=large][/size] [b] ...
Ext3.0 动态数据 Chart 初探 -
fushun_test:
很不错,柱状的每个珠子颜色和饼状的每个部分的颜色可以自定义吗 ...
Ext3.0 动态数据 Chart 初探
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
- 静态生成tree.rar (1.3 KB)
- 下载次数: 3111
- dtree参数说明..rar (17.4 KB)
- 下载次数: 2865
- dtree_JQuery实例.动态生成树.rar (832.1 KB)
- 下载次数: 8476
评论
[*]
[*]
[*]
[*]
[*]
你这叫动态树吗?
别误人子弟。
javaeye这种滥竽充数的人怎么这么多。
请指教,
那个不是用ajax是什么?
且不说动态是什么定义的.
我的意思只是说是从数据里动态的读取数据```
你的树是
不论点那级节点 都去取整个树的数据。
应该做的效果是
不论点那级节点 只去本级下一层
这样才有意义
呵呵.对.你这样比我想法更好.只取单独的节点的分节点
你这叫动态树吗?
别误人子弟。
javaeye这种滥竽充数的人怎么这么多。
请指教,
那个不是用ajax是什么?
且不说动态是什么定义的.
我的意思只是说是从数据里动态的读取数据```
你的树是
不论点那级节点 都去取整个树的数据。
应该做的效果是
不论点那级节点 只去本级下一层
这样才有意义
你这叫动态树吗?
别误人子弟。
javaeye这种滥竽充数的人怎么这么多。
请指教,
那个不是用ajax是什么?
且不说动态是什么定义的.
我的意思只是说是从数据里动态的读取数据```
你这叫动态树吗?
别误人子弟。
javaeye这种滥竽充数的人怎么这么多。
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page import="com.dao.*"%>
<%
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>");
}
%>
是不是设置ContentType 的问题呢
setContentType("text/xml;charset=utf-8");
本身这边文章也只是参考的,对于ajax的应用体现了一下.
这个例子我已经测试过了.绝对可以通过.
如果没成功,细心的调试一次吧.
就这点没好明白,我也是用javabean,数据库取出来,最后做的方法有多种,想参考,不想自己写,自己修改都行,呵呵
不过还是谢谢楼主了
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page import="com.dao.*"%>
<%
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>");
}
%>
var tree = new dTree('tree');
tree.add(0, -1, '刻面管理列表');
var intNode = 0;
var parentNode = 0;
$.ajax({
url:'facetServlet',
type:'post',
dataType:'xml',
error:function(json){
alert("not lived");
},
success:function(xml){
$(xml).find("facet").each(function(){
tree.add(1, 0, '2123');
intNode += 1;
parentNode = intNode;
var facetName = $(this).attr("name");
alert(facetName);
tree.add(intNode, 0, facetName);
var termValue;
var terms= $(this).find("term").each(function(){
intNode += 1;
termValue = $(this).text();
alert(termValue);
tree.add(intNode,parentNode,termValue) ;
}) ;
});
}
});
document.write(tree);
</script>
我的是这样写的
tree.add(1, 0, '2123'); 放到方法内就执行不了
放到ajax()外就可以
其他的动态添加节点也是显示不出来
有什么问题??希望给指点一下
数据都取出来了
为什么我的测试实现不了啊
dtree对于超过1000个节点的操作,速度变慢,效果很不理想,
请问有没有好的解决办法呢
我也有同样的问题,有好的解决方法吗?
发表评论
-
Origin字段 Header 为了防止CSRF的攻击
2014-07-08 12:09 1734为了防止CSRF的攻击,我们建议修改浏览器在发送POST请 ... -
eval解析JSON中的注意点
2013-12-08 18:32 740eval解析JSON中的注意点 在JS中将JSON的 ... -
jQuery ajax返回parsererror错误的解决方法
2013-12-04 22:38 1533jQuery ajax返回parsererror错误的解决 ... -
Ext3.0 动态数据 Chart 初探
2010-05-06 10:56 10410学习了Ext的Chart,看了官方提供的Example,也搜索 ... -
非常不错的Jquery图像报表Javascript类库.
2010-04-13 17:51 6844http://www.highcharts.com/ ... -
纯Java动态生成SVG饼图与JFreeChart超强功能生成SVG图表.
2009-12-13 21:20 4424SVG生成饼图,虽然代码实现,但是感觉太复杂,太耗费时间,还不 ... -
AJAX的中文乱码解决方法整理
2009-03-31 21:43 1161encodeURIComponent(dudu赛车),它是将中 ... -
手机主题网站,征集中文名字!炫出你的创意吧!
2009-03-27 14:58 1456手机主题网站,征集中文名字..炫出你的创意吧!! 网 ... -
Dom4j笔记总结《入门总结》
2009-03-13 08:51 1316Parsing XML 或许你想要做的第一件事情就是 ... -
答复: 代码评审怎么做,做到什么程度合适?
2009-03-11 09:26 1545不知道.看帖的人,有没 ... -
大家一起来讨论讨论像56和优酷等哪些网站,里面的动感相册功能是怎样实现的!
2009-01-08 16:53 1142大家一起来讨论讨论 像56和优酷等哪些网站,里面的动感相册功能 ... -
手机主题网站开发
2009-01-08 13:43 1347工作一段时间了,一直在公司开发这个网站. http:// ... -
SmartUpload缺陷:不能上传大文件,占内存耗CPU
2009-01-07 10:03 4436最近我们的网站项目,有一段时间,服务器运行到一定的时候时,就会 ... -
最近我公司的网站,服务器时间长了.就会报内存溢出.找不到原因
2008-12-22 17:10 1107最近我公司的网站,服务器时间长了,访问量变大.就会报内存溢出. ... -
怎样让一个网站,在搜索引擎中得到更够的搜索率呢?
2008-11-27 09:44 1122我们公司最近在做一个网站,大家提点建议呢,通过哪些方式能够让网 ...
相关推荐
对于初级开发人员 做树是件很头疼的事情 介绍一个使用的方法 Dtree+Jquery动态生成树节点
NULL 博文链接:https://zhangrong108.iteye.com/blog/618122
jsp+dtree+taglib自定义标签 动态生成树节点,jsp页面只需要用自定义的标签,我用的是的mysql数据库,并且提供了建立表的sql语句和插入数据的语句。
网上实例一般都是介绍整棵树的生成,本实例根据网上的实例修改,生成菜单树,希望对想要自己做这方面的后来者有所帮助。 基于oracle数据库,包括源码,新建表,然后,导入工程即可运行。
dtree+jquery 动态实现无限树形菜单 (包括增删改查) 好不容易,搞出来的,不容易啊
基于图形化对于动态树的菜单进行管理,本工程基于ssh框架,实例来源于网上,经过修改,从网上来,到网上去。 基于oracle数据库,新建表,导入工程,即可运行
NULL 博文链接:https://wdhdd889.iteye.com/blog/426531
dtree+ajax异步加载树,请按照自己的需求修改
dtreeJQuery实例.动态生成树dtreeJQuery实例.动态生成树
jquery整合dtree 动态加载树形结构, 本人这段时间正巧要做一个省市县的树状结构图,公司之前用的dtree实现...测试数据库为mysql,代码里面有建表语句与测试数据,可直接发布运行查看该例子。有对这颗树的增删改查。
NULL 博文链接:https://lidechungo-126-com.iteye.com/blog/1470998
spring+struts2+hibernate+json+dtree+mysql实现的无限级联树含JAE包
本压缩文件中包含14个制作Tree的Demo(包括多节点展开带复选框的Tree),涉及到的技术包含jquery,Dtree,javascript......
由于项目需要,需要对DTree通过右键菜单进行增删查改,我根据网上的资料和自己的需求进行修改的,希望对大家有所帮助。
dtree支持动态添加,删除节点dtree支持动态添加,删除节点dtree支持动态添加,删除节点dtree支持动态添加,删除节点
dtree_JQuery实例.动态生成树
自己封装的三种树形结构,一种是原始dtree,第二种是dtree结合的jquery封装的右键dtree树,第三种修改的dtree源码复选框树形菜单,附件中都已经标注好了,欢迎大家使用。