http://luohua.iteye.com/blog/451453

dTree 主页：http://destroydrop.com/javascripts/tree/

dTree是个很方便在页面生成树的 js 控件，如果你下载了，我猜里在几分钟之内便能在页面上显示出一颗树来。

它本身给的例子是通过一些静态数据构造树，下面我说一种通过查询的数据动态构造树的方法。

例子里没有真实的数据库操作，而是用一个模拟的数据库操作类替代。

在该例子中为了简便和理解没有分为过多的层，仅有 页面显示层 和 模拟的 数据库层。

最后对页面上有逻辑代码的问题作了下改进。

首先看看model 类，如下：

  1. public class Node {
  2. private int id;
  3. private String name;
  4. private int pId;
  5. public Node(){}
  6. public Node(int id, String name, int pId){
  7. this.id = id;
  8. this.name = name;
  9. this.pId = pId;
  10. }
  11. public int getId() {
  12. return id;
  13. }
  14. public void setId(int id) {
  15. this.id = id;
  16. }
  17. public String getName() {
  18. return name;
  19. }
  20. public void setName(String name) {
  21. this.name = name;
  22. }
  23. public int getPId() {
  24. return pId;
  25. }
  26. public void setPId(int id) {
  27. pId = id;
  28. }
  29. }

model 类很简单，并且只包含了构造一个树必要的几个属性，结点id，结点名字和结点父id。

下面再来看下上面 model 的 数据库操作类，里面构造了一些数据，并有一些得到数据的方法，如下：

  1. public class NodeDb {
  2. private static List<Node> treeList;
  3. static{
  4. treeList = new ArrayList<Node>();
  5. Node n = new Node(0,"Book",-1);
  6. treeList.add(n);
  7. n = new Node(1,"Computer",0);
  8. treeList.add(n);
  9. n = new Node(2,"Java",1);
  10. treeList.add(n);
  11. n = new Node(3,"C#",1);
  12. treeList.add(n);
  13. n = new Node(4,"Php",1);
  14. treeList.add(n);
  15. n = new Node(5,"Thinking in Java",2);
  16. treeList.add(n);
  17. n = new Node(6,"Java Core",2);
  18. treeList.add(n);
  19. n = new Node(7,"Thinking in C#",3);
  20. treeList.add(n);
  21. n = new Node(8,"C# Core",3);
  22. treeList.add(n);
  23. n = new Node(9,"Thinking in Php",4);
  24. treeList.add(n);
  25. n = new Node(10,"Php Core",4);
  26. treeList.add(n);
  27. }
  28. public List<Node> getNodes(){
  29. return treeList;
  30. }
  31. }

然后再看下页面，

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2. pageEncoding="UTF-8"%>
  3. <%@ page import="dtree.model.*" %>
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  5. <%@page import="dtree.db.NodeDb"%>
  6. <%@page import="java.util.Iterator"%><html>
  7. <head>
  8. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  9. <title>Show Tree</title>
  10. <link rel="StyleSheet" type="text/css" href="dtree.css" />
  11. <script type="text/javascript" src="dtree.js"></script>
  12. </head>
  13. <body>
  14. <%
  15. NodeDb ndDb = new NodeDb();
  16. Iterator<Node> treeIt = ndDb.getNodes().iterator();
  17. StringBuffer sbf = new StringBuffer();
  18. // 定义js树对象
  19. sbf.append("dtree = new dTree(\"dtree\");");
  20. while(treeIt.hasNext()){
  21. Node nd = treeIt.next();
  22. // 增加 js树结点
  23. sbf.append("dtree.add("+nd.getId()+","+nd.getPId()+",\""+nd.getName()+"\");");
  24. }
  25. // 输出js树
  26. sbf.append("document.write(dtree);");
  27. %>
  28. <script type="text/javascript">
  29. // 执行生成的js字符串
  30. eval('<%=sbf.toString()%>');
  31. </script>
  32. </body>
  33. </html>

就这样几步，我们并能通过从（模拟）数据库里取出的数据动态的在页面上生成我们的树，如下显示：

到此为止，一个完整的树已经建立完成，可以看到这个过程非常简单。

但上面的页面代码中有个问题，就是包含了大量的逻辑代码，为了减少这些代码以让页面代码更象“页面代码”，将上面的例子作如下改变：

首先，我们在 数据库操作类里新增一个方法，很显然该方法便是用来生成 js 字符串的，如下：

  1. // 返回定义且生成页面树的 js 字符串
  2. public String getJSTreeString(){
  3. Iterator<Node> treeIt = getNodes().iterator();
  4. StringBuffer sbf = new StringBuffer();
  5. // 定义js树对象
  6. sbf.append("dtree = new dTree(\"dtree\");");
  7. while(treeIt.hasNext()){
  8. Node nd = treeIt.next();
  9. // 增加 js树结点
  10. sbf.append("dtree.add("+nd.getId()+","+nd.getPId()+",\""+nd.getName()+"\");");
  11. }
  12. // 输出js树
  13. sbf.append("document.write(dtree);");
  14. return sbf.toString();
  15. }

然后再看看这次少得可怜的页面代码：

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2. pageEncoding="UTF-8"%>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4. <%@page import="dtree.db.NodeDb"%><html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7. <title>Show Tree</title>
  8. <link rel="StyleSheet" type="text/css" href="dtree.css" />
  9. <script type="text/javascript" src="dtree.js"></script>
  10. </head>
  11. <body>
  12. <script type="text/javascript">
  13. eval('<%=new NodeDb().getJSTreeString()%>');
  14. </script>
  15. </body>
  16. </html>

这样改后，运行效果与前面完全一样。

上面的例子是对一个具体的业务生成的一颗树，如果我们的 model 改变，则需要完全再重写生成树的代码，所以可以考虑利用反射机制写一个通用的生成树的类，不过有没有这个必要也不好说，因为一个项目应该也不会有很多颗树，而且不用反射来的更快些。

其实生成一颗符合需求的树远远没有上面那么简单，不过 dTree 也能做出功能很强大的树来，这需要在构造结点时添加更多需要的属性，其实方法与上面还是一样，参考文档即可。

如果有其他方法请与我分享，谢谢。

dTree 动态生成树的更多相关文章

  1. dTree动态生成树(后台处理，简化前台操作)

    dTree是个很方便在页面生成树的 js 控件,如果你下载了,我猜里在几分钟之内便能在页面上显示出一颗树来. 它本身给的例子是通过一些静态数据构造树,下面我说一种通过查询的数据动态构造树的方法. 例子 ...

  2. jstree动态生成树

    前篇文章简单介绍了静态生成树,这篇文章将通过后台把数据通过json形式传到前台,进行动态生成树. 本篇的程序所用框架为Spring MVC,可以很方便的通过controller层传json到前台. 前 ...

  3. JSON动态生成树

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. ztree实现左边动态生成树，右边为具体信息功能

    页面原型图: 图片.png 功能需求:点击左边树上的子节点,像后台发送请求,将请求到的信息展示在右边的表单里面 前端代码实现: 引入css文档: <link rel="styleshe ...

  5. jstree静态生成树并为树添加触发事件

    本章将介绍如何简单的使用jstree生成树(生成树的数据是静态的),并为树添加点击事件. 1. 建一个jsp页面,引入jquery.js(在其他js前引用),引入jstree所需的js,css文件(可 ...

  6. Spring多数据源解决方案

    Figure 2 多数据源的选择逻辑渗透至客户端 解决方案 Figure 3 采用Proxy模式来封转数据源选择逻辑 通过采用Proxy模式我们在方案实现中实现一个虚拟的数据源.并且通过它来封装数据源 ...

  7. Ext.Net学习笔记23：Ext.Net TabPanel用法详解

    Ext.Net学习笔记23:Ext.Net TabPanel用法详解 上面的图片中给出了TabPanel的一个效果图,我们来看一下代码: <ext:TabPanel runat="se ...

  8. [LCT应用]

    维护动态生成树,建树方法:假设边edge(x,y),则建立x ->edge->y的先后顺序.

  9. Web应用程序开发，基于Ajax技术的JavaScript树形控件

    感谢http://www.cnblogs.com/dgrew/p/3181769.html#undefined 在Web应用程序开发领域,基于Ajax技术的JavaScript树形控件已经被广泛使用, ...

随机推荐

  1. 2018百度之星开发者大赛－paddlepaddle学习

    前言 本次比赛赛题是进行人流密度的估计,因为之前看过很多人体姿态估计和目标检测的论文,隐约感觉到可以用到这次比赛上来,所以趁着现在时间比较多,赶紧报名参加了一下比赛,比赛规定用paddlepaddle ...

  2. List Leaves 树的层序遍历

    3-树2 List Leaves (25 分) Given a tree, you are supposed to list all the leaves in the order of top do ...

  3. PHPCMS V9 的手机门户wap绑定单页面

    当前的Phpcms V9手机网站的设置还有点弱,绑定的栏目不能设置选择模板,而且不能绑定单页面page.不过可以自定义做到绑定单页面page这一个功能:1.修改phpcms\modules\wap\i ...

  4. Scrum立会报告+燃尽图（十月二十日总第十一次）

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2246 项目地址:https://git.coding.net/zhang ...

  5. android入门 — Service

    Service完全在后台运行,没有用户界面.使用的时候先创建Service子类,然后在AndroidManifest.xml中进行注册,同时可以通过<intent-filter.../>进 ...

  6. android入门 — 多线程（一）

    android中的一些耗时操作,例如网络请求,如果不能及时响应,就会导致主线程被阻塞,出现ANR,非常影响用户体验,所以一些耗时的操作,我们会想办法放在子线程中去完成. android的UI操作并不是 ...

  7. 0517 SCRUM团队项目4.0

    题目 1.准备看板.形式参考图4.2.任务认领,并把认领人标注在看板上的任务标签上.先由个人主动领任务,PM根据具体情况进行任务的平衡.然后每个人都着手实现自己的任务.3.为了团队合作愉快进展顺利,请 ...

  8. C++ Primer Plus学习：第二章

    C++入门第二章:开始学习C++ 进入C++ 首先,以下是一个C++程序: //myfirst.cpp 显示一行文字 #include<iostream> //预处理器编译指令 int m ...

  9. WebService（二）

    使用eclipse开发webservice的服务器端以及客户端的简单实例 1.服务端 在eclipse中像建立一个web项目一样,new->Dynamic Web Project A.建一个需要 ...

  10. 多tab点击切换

    现在来一个小练习,就是用js实现多tab之间的切换: <body> <ul id="tab"> <li id="tab1"> ...