dTree 动态生成树

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

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

 

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

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

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

 

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

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

 

首先看看model 类，如下：

 

Java代码  收藏代码
  1. public class Node {  
  2.       
  3.     private int id;  
  4.     private String name;  
  5.     private int pId;  
  6.       
  7.     public Node(){}  
  8.       
  9.     public Node(int id, String name, int pId){  
  10.         this.id = id;  
  11.         this.name = name;  
  12.         this.pId = pId;  
  13.     }  
  14.       
  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 {  
  2.       
  3.     private static List<Node> treeList;  
  4.       
  5.     static{  
  6.         treeList = new ArrayList<Node>();  
  7.           
  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.     }  
  31.       
  32.     public List<Node> getNodes(){  
  33.         return treeList;  
  34.     }  
  35.       
  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">  
  5.   
  6.   
  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. %>  
  30.   
  31. <script type="text/javascript">  
  32. // 执行生成的js字符串  
  33. eval('<%=sbf.toString()%>');  
  34. </script>  
  35.   
  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);");  
  14.       
  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>  
  12.   
  13. <script type="text/javascript">  
  14. eval('<%=new NodeDb().getJSTreeString()%>');  
  15. </script>  
  16.   
  17. </body>  
  18. </html>  

 

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

 

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

 

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

 

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

posted @ 2016-01-15 21:46  _海阔天空  阅读(1700)  评论(0)  编辑  收藏  举报