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

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

????????? 4：页面代码书写的位置是：一般写在表格的td之中
?说明：这是静态的代码，动态的可用循环加入。其他 tree.add(id,pid,name,url,"","","","",true);
?
三：css文件的注解
1:dtree.css
?
???????? 不罗嗦啦..上面的只是让你大概了解一下.dtree怎么用.
?
??? dtree+JQuery动态生成树.思路其实很简单...? 首先把树的节点信息存储到数据库,然后在servlet或jsp中获取数据库表中的数据,把这些信息写成在xml文件中.然后界面jsp页面通过JQuery实现对改servlet的请求.并且回调方法中接受xml数据对象.并且遍历xml文件,取得xml文件中的节点的属性或文本数据.再循环的对dtree添加节点.。
?
1 .?在?MYSQL 中的test数据库中创建表.tree_table.? 
???? SQL语句.
?5. 将dtree.js 和dtree.css，jquery.js, img文件夹.放在WebRoot下面.(工程的根目录)
?6.? 编写我们的tree.jsp页面.
?????? 
??? demo的结构图:
??????????? 
???? 
?附件说明.
? 1.tree2.jsp.一个简单jsp。静态生成一个树结构
? 2.dtree的用法文章及其例子.
? 3.dtree+jquery动态生成树的demo_____DtreeTest
???????????????? 
?? 
<%@ 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>");
}
%><%@ 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");