码迷，mamicode.com
首页 > 其他好文 > 详细

dTree 动态生成树

时间：2016-01-15 23:04:04      阅读：271      评论：0      收藏：0      [点我收藏+]

标签：

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 也能做出功能很强大的树来，这需要在构造结点时添加更多需要的属性，其实方法与上面还是一样，参考文档即可。

 

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

dTree 动态生成树

标签：

原文地址：http://www.cnblogs.com/zkwarrior/p/5134578.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！