Dtree+Jquery动态生成树节点
2010-08-15 14:08
239 查看
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文件中不能有重复的样式
<linkhref="/jingjindatabase/pub/css/a.css"rel="stylesheet"type="text/css"/>
<linkhref="/jingjindatabase/pub/css/dtree.css"rel="stylesheet"type="text/css"/>
4：页面代码书写的位置是：一般写在表格的td之中
<scripttype="text/javascript"src="/myMobanGis/pub/js/dtree.js"></script>
<scripttype="text/javascript">
tree=newdTree('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;
}
.dtreeimg{//定义选用节点图标的样式，位置
border:0px;
vertical-align:middle;
}
.dtreea{//
color:#006600;
text-decoration:none;
}
.dtreea.node,.dtreea.nodeSel{
white-space:nowrap;
padding:0px0px0px0px;
}
.dtreea.node:hover,.dtreea.nodeSel:hover{
color:#006600;
text-decoration:none;
}
.dtreea.nodeSel{
background-color:#c0d2ec;
}
.dtree.clip{
overflow:hidden;
}
a=newdTree('a');
a.config.useStatusText=true;
a.config.closeSameLevel=true;
a.config.useCookies=false;
a.add(0,-1,'Treeexample','javascript:void(0);');
a.add(1,0,'Node1','javascript:void(0);');
a.add(2,1,'Node2','javascript:void(0);');
a.add(3,1,'Node3','javascript:void(0);');
a.add(4,0,'Node4','javascript:void(0);');
a.add(5,4,'Node5','javascript:void(0);');
a.add(6,4,'Node6','javascript:void(0);');
a.add(7,2,'Node7','javascript:void(0);');
a.add(8,6,'Node8','javascript:void(0);');
a.add(9,1,'Node9','javascript:void(0);');
a.add(10,2,'Node10','javascript:void(0);');
a.add(11,8,'Node11','javascript:void(0);');
a.add(12,2,'Node12','javascript:void(0);');
a.add(13,9,'Node13','javascript:void(0);');
a.add(14,4,'Node14','javascript:void(0);');
a.add(15,2,'Node15','javascript:void(0);');
a.add(16,1,'Node16','javascript:void(0);');
a.add(17,4,'Node17','javascript:void(0);');
a.add(18,6,'Node18','javascript:void(0);');
a.add(19,7,'Node19','javascript:void(0);');
document.write(a);
tree2.jspdemo中的一个jsp页面.静态的生成一棵树.(二级节点)
<%@pagelanguage="java"pageEncoding="utf-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<title>树形结构_____普通生成树的方式</title>
<linkrel="stylesheet"href="dtree.css"type="text/css"></link>
<scripttype="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>
<scripttype="text/javascript">
tree=newdTree('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_tableCREATETABLE`tree_table`(
`id`int(11)NOTNULLauto_increment,
`nodeId`varchar(12)NOTNULL,
`parentId`varchar(12)NOTNULL,
`hrefAddress`varchar(85),
`nodeName`varchar(20),
PRIMARYKEY(`id`)
)ENGINE=InnoDBDEFAULTCHARSET=gbk
2.连接数据库的类.主要是读取表中的数据.
packagecom.dao;
importjava.sql.Connection;
importjava.sql.DriverManager;
importjava.sql.PreparedStatement;
importjava.sql.ResultSet;
importjava.sql.SQLException;
importjava.util.ArrayList;
publicclassDaoTest{
Connectioncon=null;
publicConnectiongetConnection(){
Connectionconn=null;
Stringurl="jdbc:mysql://localhost/test?useUnicode=true&characterEncoding=gbk";
Stringuser="root";
Stringpassword="admin";
try{
if(conn==null){
Class.forName("com.mysql.jdbc.Driver").newInstance();
conn=DriverManager.getConnection(url,user,password);
}
}catch(Exceptione){
System.out.println("连接失败");
returnnull;
}finally{
url=null;
user=null;
password=null;
}
returnconn;
}
publicArrayList<Nodes>getNodeInfo(){
Stringsql="selectnodeId,parentId,hrefAddress,nodeNamefromtree_tableorderbyid";
PreparedStatementpre=null;
Connectionconn=null;
conn=getConnection();
ResultSetrs=null;
ArrayList<Nodes>list=newArrayList<Nodes>();
try{
pre=conn.prepareStatement(sql);
rs=pre.executeQuery();
while(rs.next()){
Nodesnode=newNodes();
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(SQLExceptione){
e.printStackTrace();
}finally{
pre=null;
conn=null;
rs=null;
}
returnlist;
}
}
3.节点。JAVABEAN.类.
packagecom.dao;
publicclassNodes{
privateintid;
privateStringnodeId;
privateStringparentId;
privateStringhrefAddress;
privateStringnodeName;
publicintgetId(){
returnid;
}
publicvoidsetId(intid){
this.id=id;
}
publicStringgetNodeId(){
returnnodeId;
}
publicvoidsetNodeId(StringnodeId){
this.nodeId=nodeId;
}
publicStringgetParentId(){
returnparentId;
}
publicvoidsetParentId(StringparentId){
this.parentId=parentId;
}
publicStringgetHrefAddress(){
returnhrefAddress;
}
publicvoidsetHrefAddress(StringhrefAddress){
this.hrefAddress=hrefAddress;
}
publicStringgetNodeName(){
returnnodeName;
}
publicvoidsetNodeName(StringnodeName){
this.nodeName=nodeName;
}
}
4.创建一个Serlvet来生成xml文件.
注意:response.setContentType("text/xml;charset=utf-8");
packagecom.handler;
importjava.io.IOException;
importjava.io.PrintWriter;
importjava.util.ArrayList;
importjavax.servlet.ServletException;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
importcom.dao.DaoTest;
importcom.dao.Nodes;
publicclassNodesPrintextendsHttpServlet{
privatestaticfinallongserialVersionUID=1L;
publicvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)
throwsServletException,IOException{
doPost(request,response);
}
publicvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)
throwsServletException,IOException{
request.setCharacterEncoding("utf-8");
response.setContentType("text/xml;charset=utf-8");
PrintWriterout=response.getWriter();
DaoTesttest=newDaoTest();
ArrayList<Nodes>list=test.getNodeInfo();
if(list!=null&&list.size()>0){
out.println("<?xmlversion=/"1.0/"encoding=/"UTF-8/"?>");
out.println("<nodes>");
for(inti=0;i<list.size();i++){
Nodesnode=list.get(i);
out.println("<nodenodeId='"+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页面.
<%@pagelanguage="java"pageEncoding="utf-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<title>树形结构___ajax请求方式</title>
<scripttype="text/javascript"src="dtree.js"></script>
<scripttype="text/javascript"src="jquery.js"></script>
<linkrel="stylesheet"href="dtree.css"type="text/css"></link>
<scripttype="text/javascript">
tree=newdTree('tree');//创建一个对象.
$.ajax({
<Ahref="'NodesPrint'">url:'NodesPrint'</A>,
type:'post',//数据发送方式
dataType:'xml',//接受数据格式
error:function(json){
alert("notlived!");
},
async:false,//同步方式
success:function(xml){
$(xml).find("node").each(function(){
varnodeId=$(this).attr("nodeId");
varparentId=$(this).attr("parentId");
varhrefAddress=$(this).attr("hrefAddress");
varnodeName=$(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
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文件中不能有重复的样式
<linkhref="/jingjindatabase/pub/css/a.css"rel="stylesheet"type="text/css"/>
<linkhref="/jingjindatabase/pub/css/dtree.css"rel="stylesheet"type="text/css"/>
<linkhref="/jingjindatabase/pub/css/a.css"rel="stylesheet"type="text/css"/> <linkhref="/jingjindatabase/pub/css/dtree.css"rel="stylesheet"type="text/css"/>
4：页面代码书写的位置是：一般写在表格的td之中
<scripttype="text/javascript"src="/myMobanGis/pub/js/dtree.js"></script>
<scripttype="text/javascript">
tree=newdTree('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;
}
.dtreeimg{//定义选用节点图标的样式，位置
border:0px;
vertical-align:middle;
}
.dtreea{//
color:#006600;
text-decoration:none;
}
.dtreea.node,.dtreea.nodeSel{
white-space:nowrap;
padding:0px0px0px0px;
}
.dtreea.node:hover,.dtreea.nodeSel:hover{
color:#006600;
text-decoration:none;
}
.dtreea.nodeSel{
background-color:#c0d2ec;
}
.dtree.clip{
overflow:hidden;
}
a=newdTree('a');
a.config.useStatusText=true;
a.config.closeSameLevel=true;
a.config.useCookies=false;
a.add(0,-1,'Treeexample','javascript:void(0);');
a.add(1,0,'Node1','javascript:void(0);');
a.add(2,1,'Node2','javascript:void(0);');
a.add(3,1,'Node3','javascript:void(0);');
a.add(4,0,'Node4','javascript:void(0);');
a.add(5,4,'Node5','javascript:void(0);');
a.add(6,4,'Node6','javascript:void(0);');
a.add(7,2,'Node7','javascript:void(0);');
a.add(8,6,'Node8','javascript:void(0);');
a.add(9,1,'Node9','javascript:void(0);');
a.add(10,2,'Node10','javascript:void(0);');
a.add(11,8,'Node11','javascript:void(0);');
a.add(12,2,'Node12','javascript:void(0);');
a.add(13,9,'Node13','javascript:void(0);');
a.add(14,4,'Node14','javascript:void(0);');
a.add(15,2,'Node15','javascript:void(0);');
a.add(16,1,'Node16','javascript:void(0);');
a.add(17,4,'Node17','javascript:void(0);');
a.add(18,6,'Node18','javascript:void(0);');
a.add(19,7,'Node19','javascript:void(0);');
document.write(a);
tree2.jspdemo中的一个jsp页面.静态的生成一棵树.(二级节点)
<%@pagelanguage="java"pageEncoding="utf-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<title>树形结构_____普通生成树的方式</title>
<linkrel="stylesheet"href="dtree.css"type="text/css"></link>
<scripttype="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>
<scripttype="text/javascript">
tree=newdTree('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_tableCREATETABLE`tree_table`(
`id`int(11)NOTNULLauto_increment,
`nodeId`varchar(12)NOTNULL,
`parentId`varchar(12)NOTNULL,
`hrefAddress`varchar(85),
`nodeName`varchar(20),
PRIMARYKEY(`id`)
)ENGINE=InnoDBDEFAULTCHARSET=gbk
2.连接数据库的类.主要是读取表中的数据.
packagecom.dao;
importjava.sql.Connection;
importjava.sql.DriverManager;
importjava.sql.PreparedStatement;
importjava.sql.ResultSet;
importjava.sql.SQLException;
importjava.util.ArrayList;
publicclassDaoTest{
Connectioncon=null;
publicConnectiongetConnection(){
Connectionconn=null;
Stringurl="jdbc:mysql://localhost/test?useUnicode=true&characterEncoding=gbk";
Stringuser="root";
Stringpassword="admin";
try{
if(conn==null){
Class.forName("com.mysql.jdbc.Driver").newInstance();
conn=DriverManager.getConnection(url,user,password);
}
}catch(Exceptione){
System.out.println("连接失败");
returnnull;
}finally{
url=null;
user=null;
password=null;
}
returnconn;
}
publicArrayList<Nodes>getNodeInfo(){
Stringsql="selectnodeId,parentId,hrefAddress,nodeNamefromtree_tableorderbyid";
PreparedStatementpre=null;
Connectionconn=null;
conn=getConnection();
ResultSetrs=null;
ArrayList<Nodes>list=newArrayList<Nodes>();
try{
pre=conn.prepareStatement(sql);
rs=pre.executeQuery();
while(rs.next()){
Nodesnode=newNodes();
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(SQLExceptione){
e.printStackTrace();
}finally{
pre=null;
conn=null;
rs=null;
}
returnlist;
}
}
3.节点。JAVABEAN.类.
packagecom.dao;
publicclassNodes{
privateintid;
privateStringnodeId;
privateStringparentId;
privateStringhrefAddress;
privateStringnodeName;
publicintgetId(){
returnid;
}
publicvoidsetId(intid){
this.id=id;
}
publicStringgetNodeId(){
returnnodeId;
}
publicvoidsetNodeId(StringnodeId){
this.nodeId=nodeId;
}
publicStringgetParentId(){
returnparentId;
}
publicvoidsetParentId(StringparentId){
this.parentId=parentId;
}
publicStringgetHrefAddress(){
returnhrefAddress;
}
publicvoidsetHrefAddress(StringhrefAddress){
this.hrefAddress=hrefAddress;
}
publicStringgetNodeName(){
returnnodeName;
}
publicvoidsetNodeName(StringnodeName){
this.nodeName=nodeName;
}
}
4.创建一个Serlvet来生成xml文件.
注意:response.setContentType("text/xml;charset=utf-8");
packagecom.handler;
importjava.io.IOException;
importjava.io.PrintWriter;
importjava.util.ArrayList;
importjavax.servlet.ServletException;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
importcom.dao.DaoTest;
importcom.dao.Nodes;
publicclassNodesPrintextendsHttpServlet{
privatestaticfinallongserialVersionUID=1L;
publicvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)
throwsServletException,IOException{
doPost(request,response);
}
publicvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)
throwsServletException,IOException{
request.setCharacterEncoding("utf-8");
response.setContentType("text/xml;charset=utf-8");
PrintWriterout=response.getWriter();
DaoTesttest=newDaoTest();
ArrayList<Nodes>list=test.getNodeInfo();
if(list!=null&&list.size()>0){
out.println("<?xmlversion=/"1.0/"encoding=/"UTF-8/"?>");
out.println("<nodes>");
for(inti=0;i<list.size();i++){
Nodesnode=list.get(i);
out.println("<nodenodeId='"+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页面.
<%@pagelanguage="java"pageEncoding="utf-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<title>树形结构___ajax请求方式</title>
<scripttype="text/javascript"src="dtree.js"></script>
<scripttype="text/javascript"src="jquery.js"></script>
<linkrel="stylesheet"href="dtree.css"type="text/css"></link>
<scripttype="text/javascript">
tree=newdTree('tree');//创建一个对象.
$.ajax({
<Ahref="'NodesPrint'">url:'NodesPrint'</A>,
type:'post',//数据发送方式
dataType:'xml',//接受数据格式
error:function(json){
alert("notlived!");
},
async:false,//同步方式
success:function(xml){
$(xml).find("node").each(function(){
varnodeId=$(this).attr("nodeId");
varparentId=$(this).attr("parentId");
varhrefAddress=$(this).attr("hrefAddress");
varnodeName=$(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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Dtree+Jquery动态生成树节点
- Dtree+Jquery动态生成树节点
- Dtree+Jquery动态生成树节点
- Dtree+Jquery动态生成树节点.
- JQuery动态显示当前选中节点的父节点
- jQuery实现动态添加节点与遍历节点功能示例
- 使用dtree生成的树结构，ajax动态加载子节点后，如何绑定右键菜单？求助
- JQuery动态显示当前选中节点的父节点
- jquery动态创建节点
- jQuery如何控制未来的元素（动态生成的节点）
- Jquery6_控制Dom元素_动态创建节点及删除节点
- jQuery中动态创建元素节点无法触发事件
- JQuery动态显示当前选中节点的父节点
- ie下，jquery为动态添加的节点添加事件，用live
- 使用dtree生成的树结构，ajax动态加载子节点后，如何绑定右键菜单续
- jquery 动态生成节点
- 解决jquery中动态新增的元素节点无法触发事件问题的两种方法
- JQuery动态显示当前选中节点的父节点
- 不刷新页面jQuery模糊搜索，第一种实现---动态删除、插入节点
- dtree 网页树状菜单及传递对象集合到js内，动态生成节点