dTree 动态生成树

dTree 动态生成树
http://luohua.iteye.com/blog/451453

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

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

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

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

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

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

首先看看model 类，如下：
Java代码
1. public class Node {
3. private int id;
4. private String name;
5. private int pId;
7. public Node(){}
9. public Node(int id, String name, int pId){
10. this.id = id;
11. this.name = name;
12. this.pId = pId;
13. }
15. public int getId() {
16. return id;
17. }
18. public void setId(int id) {
19. this.id = id;
20. }
21. public String getName() {
22. return name;
23. }
24. public void setName(String name) {
25. this.name = name;
26. }
27. public int getPId() {
28. return pId;
29. }
30. public void setPId(int id) {
31. pId = id;
32. }
33. }
model 类很简单，并且只包含了构造一个树必要的几个属性，结点id，结点名字和结点父id。

下面再来看下上面 model 的数据库操作类，里面构造了一些数据，并有一些得到数据的方法，如下：
Java代码
1. public class NodeDb {
3. private static List<Node> treeList;
5. static{
6. treeList = new ArrayList<Node>();
8. Node n = new Node(0,"Book",-1);
9. treeList.add(n);
10. n = new Node(1,"Computer",0);
11. treeList.add(n);
12. n = new Node(2,"Java",1);
13. treeList.add(n);
14. n = new Node(3,"C#",1);
15. treeList.add(n);
16. n = new Node(4,"Php",1);
17. treeList.add(n);
18. n = new Node(5,"Thinking in Java",2);
19. treeList.add(n);
20. n = new Node(6,"Java Core",2);
21. treeList.add(n);
22. n = new Node(7,"Thinking in C#",3);
23. treeList.add(n);
24. n = new Node(8,"C# Core",3);
25. treeList.add(n);
26. n = new Node(9,"Thinking in Php",4);
27. treeList.add(n);
28. n = new Node(10,"Php Core",4);
29. treeList.add(n);
30. }
32. public List<Node> getNodes(){
33. return treeList;
34. }
36. }
然后再看下页面，
Html代码
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">
7. <%@page import="dtree.db.NodeDb"%>
8. <%@page import="java.util.Iterator"%><html>
9. <head>
10. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
11. <title>Show Tree</title>
12. <link rel="StyleSheet" type="text/css" href="dtree.css" />
13. <script type="text/javascript" src="dtree.js"></script>
14. </head>
15. <body>
16. <%
17. NodeDb ndDb = new NodeDb();
18. Iterator<Node> treeIt = ndDb.getNodes().iterator();
19. StringBuffer sbf = new StringBuffer();
20. // 定义js树对象
21. sbf.append("dtree = new dTree("dtree");");
22. while(treeIt.hasNext()){
23. Node nd = treeIt.next();
24. // 增加 js树结点
25. sbf.append("dtree.add("+nd.getId()+","+nd.getPId()+",""+nd.getName()+"");");
26. }
27. // 输出js树
28. sbf.append("document.write(dtree);");
29. %>
31. <script type="text/javascript">
32. // 执行生成的js字符串
33. eval('<%=sbf.toString()%>');
34. </script>
36. </body>
37. </html>
就这样几步，我们并能通过从（模拟）数据库里取出的数据动态的在页面上生成我们的树，如下显示：

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

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

首先，我们在数据库操作类里新增一个方法，很显然该方法便是用来生成 js 字符串的，如下：
Java代码
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);");
15. return sbf.toString();
16. }
然后再看看这次少得可怜的页面代码：
Html代码
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>
13. <script type="text/javascript">
14. eval('<%=new NodeDb().getJSTreeString()%>');
15. </script>
17. </body>
18. </html>
这样改后，运行效果与前面完全一样。

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

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

如果有其他方法请与我分享，谢谢。
相关阅读:
VMware + CentOS 7搭建环境（二）
VMware + CentOS 7搭建环境（一）
电脑清理的问题整理
 windows下搭建vue+webpack的开发环境
 git使用指南
 如何使用前端技术设置地理围栏？
js点击按钮button效果（波效果）
计算两个日期时间之间的时间差：28小时38分钟
 jQuery实现的全选、反选和获取当前所有选中的值功能
 vue恼人的node_modules目录删除方法
原文地址：https://www.cnblogs.com/zkwarrior/p/5134578.html