dTree 主页：http://destroydrop.com/javascripts/tree/
dTree是个很方便在页面生成树的 js 控件，如果你下载了，我猜里在几分钟之内便能在页面上显示出一颗树来。
它本身给的例子是通过一些静态数据构造树，下面我说一种通过查询的数据动态构造树的方法。
例子里没有真实的数据库操作，而是用一个模拟的数据库操作类替代。
在该例子中为了简便和理解没有分为过多的层，仅有 页面显示层 和 模拟的 数据库层。
最后对页面上有逻辑代码的问题作了下改进。
首先看看model 类，如下：
public class Node {
private int id;
private String name;
private int pId;
public Node(){}
public Node(int id, String name, int pId){
this.id = id;
this.name = name;
this.pId = pId;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getPId() {
return pId;
}
public void setPId(int id) {
pId = id;
}
}
model 类很简单，并且只包含了构造一个树必要的几个属性，结点id，结点名字和结点父id。
下面再来看下上面 model 的 数据库操作类，里面构造了一些数据，并有一些得到数据的方法，如下：
public class NodeDb {
private static List<Node> treeList;
static{
treeList = new ArrayList<Node>();
Node n = new Node(0,"Book",-1);
treeList.add(n);
n = new Node(1,"Computer",0);
treeList.add(n);
n = new Node(2,"Java",1);
treeList.add(n);
n = new Node(3,"C#",1);
treeList.add(n);
n = new Node(4,"Php",1);
treeList.add(n);
n = new Node(5,"Thinking in Java",2);
treeList.add(n);
n = new Node(6,"Java Core",2);
treeList.add(n);
n = new Node(7,"Thinking in C#",3);
treeList.add(n);
n = new Node(8,"C# Core",3);
treeList.add(n);
n = new Node(9,"Thinking in Php",4);
treeList.add(n);
n = new Node(10,"Php Core",4);
treeList.add(n);
}
public List<Node> getNodes(){
return treeList;
}
}
然后再看下页面，
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="dtree.model.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@page import="dtree.db.NodeDb"%>
<%@page import="java.util.Iterator"%><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Show Tree</title>
<link rel="StyleSheet" type="text/css" href="dtree.css" />
<script type="text/javascript" src="dtree.js"></script>
</head>
<body>
<%
NodeDb ndDb = new NodeDb();
Iterator<Node> treeIt = ndDb.getNodes().iterator();
StringBuffer sbf = new StringBuffer();
// 定义js树对象
sbf.append("dtree = new dTree(\"dtree\");");
while(treeIt.hasNext()){
Node nd = treeIt.next();
// 增加 js树结点
sbf.append("dtree.add("+nd.getId()+","+nd.getPId()+",\""+nd.getName()+"\");");
}
// 输出js树
sbf.append("document.write(dtree);");
%>
<script type="text/javascript">
// 执行生成的js字符串
eval('<%=sbf.toString()%>');
</script>
</body>
</html>
就这样几步，我们并能通过从（模拟）数据库里取出的数据动态的在页面上生成我们的树，如下显示：
到此为止，一个完整的树已经建立完成，可以看到这个过程非常简单。
但上面的页面代码中有个问题，就是包含了大量的逻辑代码，为了减少这些代码以让页面代码更象“页面代码”，将上面的例子作如下改变：
首先，我们在 数据库操作类里新增一个方法，很显然该方法便是用来生成 js 字符串的，如下：
// 返回定义且生成页面树的 js 字符串
public String getJSTreeString(){
Iterator<Node> treeIt = getNodes().iterator();
StringBuffer sbf = new StringBuffer();
// 定义js树对象
sbf.append("dtree = new dTree(\"dtree\");");
while(treeIt.hasNext()){
Node nd = treeIt.next();
// 增加 js树结点
sbf.append("dtree.add("+nd.getId()+","+nd.getPId()+",\""+nd.getName()+"\");");
}
// 输出js树
sbf.append("document.write(dtree);");
return sbf.toString();
}
然后再看看这次少得可怜的页面代码：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@page import="dtree.db.NodeDb"%><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Show Tree</title>
<link rel="StyleSheet" type="text/css" href="dtree.css" />
<script type="text/javascript" src="dtree.js"></script>
</head>
<body>
<script type="text/javascript">
eval('<%=new NodeDb().getJSTreeString()%>');
</script>
</body>
</html>
这样改后，运行效果与前面完全一样。
上面的例子是对一个具体的业务生成的一颗树，如果我们的 model 改变，则需要完全再重写生成树的代码，所以可以考虑利用反射机制写一个通用的生成树的类，不过有没有这个必要也不好说，因为一个项目应该也不会有很多颗树，而且不用反射来的更快些。
其实生成一颗符合需求的树远远没有上面那么简单，不过 dTree 也能做出功能很强大的树来，这需要在构造结点时添加更多需要的属性，其实方法与上面还是一样，参考文档即可。
如果有其他方法请与我分享，谢谢。
分享到：
别加动态两字 
相关推荐
用jquery的插件dtree构建生成树的实例，非常详细，根据项目需要的不同，共总结了8种，任你挑选。
网上实例一般都是介绍整棵树的生成，本实例根据网上的实例修改，生成菜单树，希望对想要自己做这方面的后来者有所帮助。 基于oracle数据库，包括源码，新建表，然后，导入工程即可运行。
dtreeJQuery实例.动态生成树dtreeJQuery实例.动态生成树
Dtree Jquery动态生成树节点 http://www.iteye.com/topic/350056
用ＪＳ对象 dTree 生成无限级对象，在页面取得存在Action当中的List,生成动态树形菜单
jsp+dtree+taglib自定义标签 动态生成树节点，jsp页面只需要用自定义的标签，我用的是的mysql数据库，并且提供了建立表的sql语句和插入数据的语句。
使用dtree插件生成动态树 1，从动态树的要求我们要从数据库生成 d = new dTree('d'); d.add(1,0,'云南电信'); d.add(11,1,'省公司本部'); d.add(12,1,'昆明分公司'); d.add(121,12,'公司领导'); d.add(122,12,'...
动态从数据库中获取数据，并生成树，内附带SQL，并有说明。
dtree_JQuery实例.动态生成树
dtree动态树形菜单，我想大家在做权限管理的时候一定想实现树形菜单，根据自己对应的权限去生成相应的动态树形菜单吧，那就来看看吧！
有静态树形菜单和动态(从数据库获取数据)树形菜单展示两种 数据库连接采用简单的类实现 数据位MySQL(5.0.21),数据库创建脚本为dtree.sql 菜单既有普通的树结构展示,也有方便做权限等功能的带选择框的展示(含带...
NULL 博文链接：https://zhangrong108.iteye.com/blog/618122
本人最近自己写了一个利用dTree动态生成一棵或者多棵树型导航,涉及到的知识点也是非常简单的,但是功能很强大,一看代码就知道了,理论上可以无限生成树分枝,由于没附上数据库表,所以我只是在servlet里模拟了一个数据库...
function dTree(objName) { this.config = { target : null, folderLinks : true, useSelection : true, useCookies : true, useLines : true, useIcons : true, ...
基于图形化对于动态树的菜单进行管理，本工程基于ssh框架，实例来源于网上，经过修改，从网上来，到网上去。 基于oracle数据库，新建表，导入工程，即可运行
dtree在生成简单树方面比使用Jquery的treeView要方便，代码实现的是用户选择的树状结构图。
1、可设置无限级菜单 2、不必使用框架 3、可刷新，多页面内跳转不会影响菜单（IE6下好像有点问题） 4、可限级创造子树 5、支持目前主流浏览器：IE5，6，7，ff 6、节点图片可设置切换图片效果
非常好用的dtree控件，用于生成树形菜单，方便控制和提交，包括一个简单的说明