zoukankan      html  css  js  c++  java

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

    如果有其他方法请与我分享，谢谢。
  • 相关阅读:
    Request和Session的生命周期
    了解EBP指针
    esp跟ebp跟踪记录
    深入浅出Node.js (6)
    洛谷 P2404 自然数的拆分问题
    洛谷 P1852 奇怪的字符串
    洛谷 P1433 吃奶酪
    洛谷 P1881 绳子对折
    洛谷 P1162 填涂颜色
    P1145 约瑟夫
  • 原文地址：https://www.cnblogs.com/zkwarrior/p/5134578.html
Copyright © 2011-2022 走看看