dTree是个很方便在页面生成树的 js 控件，如果你下载了，我猜里在几分钟之内便能在页面上显示出一颗树来。
它本身给的例子是通过一些静态数据构造树，下面我说一种通过查询的数据动态构造树的方法。
例子里没有真实的数据库操作，而是用一个模拟的数据库操作类替代。
在该例子中为了简便和理解没有分为过多的层，仅有 页面显示层 和 模拟的 数据库层。
最后对页面上有逻辑代码的问题作了下改进。
首先看看model 类，如下：
Java代码
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 的 数据库操作类，里面构造了一些数据，并有一些得到数据的方法，如下：
Java代码
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;
}
}
然后再看下页面，
Html代码
<%@ 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 字符串的，如下：
Java代码
// 返回定义且生成页面树的 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();
}
然后再看看这次少得可怜的页面代码：
Html代码
<%@ 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 也能做出功能很强大的树来，这需要在构造结点时添加更多需要的属性，其实方法与上面还是一样，参考文档即可。
如果有其他方法请与我分享，谢谢。
分享到：
相关推荐
在IT行业中，动态生成树（dtree）是一种常见的数据可视化技术，主要用于展示层次结构的数据，例如文件系统、组织架构或决策树等。JQuery是一个广泛使用的JavaScript库，它提供了丰富的功能来增强网页交互性。dtree是...
本篇文章将深入探讨如何利用`dTree`来生成动态的树形菜单，并结合后台Action中的List数据进行操作。 首先，我们需要理解`dTree`的基本概念。`dTree`是一个基于JavaScript的开源库，它提供了一种简单的方式来创建...
【dtree+jquery动态生成树】是一个用于创建交互式树形结构的JavaScript库，结合了jQuery框架的强大功能，使得在网页上动态展示层次结构数据变得简单。本实例着重于实现菜单树的生成，这对于构建多级导航系统尤其有用...
【dtree(树结构)——数据结构中的基石】 在计算机科学中，树结构是一种非常重要的非线性数据结构，dtree通常指的是决策树（Decision Tree）或者数据树（Data Tree）。这种结构以其独特的层次关系，模拟了现实世界中...
在这个场景中，"Dtree动态树菜单"是一个专门用于实现这种功能的工具或库。下面我们将深入探讨Dtree动态树菜单的相关知识点。 1. **Dtree介绍**： Dtree通常是一个JavaScript库或者框架的一部分，用于构建可扩展的...
通过查看这个例子，开发者可以直观地看到DTree在实际应用中的效果，同时也可以从中学习到如何在HTML页面中引入DTree库，并配置相应的JavaScript代码来生成和操作树形结构。 `dtree.js`是DTree的核心JavaScript文件...
以上就是关于dtree jQuery实例动态生成树的知识点概述，包括其核心原理、API使用、动态加载、自定义样式、事件处理、实例化配置以及集成优化等方面。在实际开发中，根据项目需求，灵活运用这些知识可以构建出高效、...
在IT领域，动态生成树节点是一项常见的需求，特别是在构建用户...动态生成树.rar"可能是实际的代码示例，"dtree参数说明..rar"则可能包含了DTree各种参数的详细解释，这些资源对于理解和应用DTree都是非常有价值的。
在IT领域，决策树（Decision Tree，简称dtree）是一种常用的数据挖掘技术，常用于分类和回归任务。本文将深入探讨如何利用dtree创建树结构，以及如何从数据库中读取节点信息构建树。 首先，我们要理解dtree的基本...
**JSP动态生成树DTREE详解** 在Web开发中，数据可视化是不可或缺的一部分，而树形结构作为一种常见的数据展示方式，常用于展示层次关系或分类信息。本篇将深入讲解如何利用JavaServer Pages (JSP) 技术，结合DTREE...
"dtree js树形结构" 是一个专门用于在网页中生成树形结构的JavaScript库，它使得开发者无需复杂的编程技巧，只需了解基本的树形结构原理，就可以快速创建出交互式的树状视图。 树形结构是一种非线性的数据结构，它...
本文将基于"使用DTree创建树"这一主题，详细解释如何利用DTree（可能指的是某个特定实现，如Python的`sklearn`库中的`DecisionTreeClassifier`或`DecisionTreeRegressor`）来构建决策树模型，并探讨相关的源码和工具...
function dTree(objName) { this.config = { target : null, folderLinks : true, useSelection : true, useCookies : true, useLines : true, useIcons : true, ...
本项目结合了JSP（JavaServer Pages）、dTree（一个JavaScript实现的树形菜单库）以及Taglib（自定义标签库），提供了一种高效的方法来实现在服务器端动态生成树结构并传递到客户端展示。 首先，JSP是Java的一种...
【dtree实现的树支持多选】是一种在网页交互中常用的数据展示和操作方式，尤其在数据层级结构复杂时，如文件系统、组织结构或菜单导航等场景。DTree（通常指的是JavaScript实现的树形控件）允许用户通过勾选节点来...
标题提到的"Dtree+Jquery动态生成树节点"是指使用DTree插件结合jQuery库来创建可交互的、动态更新的树形结构数据展示。这篇博文链接指向的是张荣（zhangrong108）在ITEYE上的博客文章，虽然具体的描述是空的，但我们...
在IT领域，决策树（Decision Tree，简称DTREE）是一种常用的数据挖掘技术，常用于分类和回归分析。本文将深入探讨如何使用DTREE构建树菜单，包括动态树和静态树的构建方法。 首先，让我们理解决策树的基本概念。...
**dtree JavaScript 树形菜单组件详解** 在Web开发中，树形菜单是一种常见的交互元素，用于展示层次化的数据结构，如网站导航、文件系统或组织结构等。`dtree`是一个轻量级且易于使用的JavaScript库，专门设计用于...
本工程使用dTree组件实现树形菜单的展示 有静态树形菜单和动态(从数据库获取数据)树形菜单展示两种 数据库连接采用简单的类实现 数据位MySQL(5.0.21),数据库创建脚本为dtree.sql 菜单既有普通的树结构展示,也有...