`
zengshaotao
  • 浏览: 753235 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

dtree树构建

 
阅读更多

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

 原文地址：http://luohua.iteye.com/blog/451453

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

 

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

分享到：
| 扩展easyui datagrid的两个方法.动态添加 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    使用DTREE构建树

    如何使用DTREE构建树菜单，包括构建动态树和静态树

    dtree树形代码案例

    dtree jquery 构建树形结构 树形代码案例

    dtree动态生成树

    用jquery的插件dtree构建生成树的实例，非常详细，根据项目需要的不同，共总结了8种，任你挑选。

    dtree动态树+Javascript右键菜单

    本文清晰的描述了构建dtree动态树，以及在树上实现javascript右键菜单。

    jsp中使用 dtree

    本人抄袭加改良了一个dtree在jsp中的使用，和大家分享，简单的构建一个树形菜单dtree还是不错的选择。

    dtree例子及js脚本和css

    用于构建组织结构或层级结构的js脚本及例子

    dtree:一种简单的纯Python决策树构造算法

    Dtree-一种简单的纯Python决策树构造算法概述给定训练数据集，它可以构建决策树，以单批或增量地进行分类或回归。 它从CSV文件加载数据。 它期望CSV中的第一行是标题，每个元素都符合模式“ name：type：mode”。 ...

    简单使用的js树脚本

    方便构建一个简单的网页上的树型菜单，功能很齐全，节点的图片可以根据打开或关闭更换。

    java汽车租赁系统.zip

    全查询菜单和根据左边的树查询不同菜单 菜单的添加、修改、删除 3、角色管理 全查询角色和模糊查询 角色的添加、修改、删除 4、用户管理 全查询用户和模糊查询 用户的添加、修改、删除以及重置密码 5、数据源的监控...

    java源码包---java 源码 大量 实例

    1个目标文件，JNDI的使用例子，有源代码，可以下载参考，JNDI的使用，初始化Context,它是连接JNDI树的起始点，查找你要的对象，打印找到的对象，关闭Context…… ftp文件传输 2个目标文件，FTP的目标是：（1）提高...

    java源码包2

    1个目标文件，JNDI的使用例子，有源代码，可以下载参考，JNDI的使用，初始化Context,它是连接JNDI树的起始点，查找你要的对象，打印找到的对象，关闭Context…… ftp文件传输 2个目标文件，FTP的目标是：（1）提高...

    java源码包3

    1个目标文件，JNDI的使用例子，有源代码，可以下载参考，JNDI的使用，初始化Context,它是连接JNDI树的起始点，查找你要的对象，打印找到的对象，关闭Context…… ftp文件传输 2个目标文件，FTP的目标是：（1）提高...

    java源码包4

    1个目标文件，JNDI的使用例子，有源代码，可以下载参考，JNDI的使用，初始化Context,它是连接JNDI树的起始点，查找你要的对象，打印找到的对象，关闭Context…… ftp文件传输 2个目标文件，FTP的目标是：（1）提高...

    成百上千个Java 源码DEMO 4(1-4是独立压缩包)

    EJB中JNDI的使用源码例子 1个目标文件，JNDI的使用例子，有源代码，可以下载参考，JNDI的使用，初始化Context,它是连接JNDI树的起始点，查找你要的对象，打印找到的对象，关闭Context…… ftp文件传输 2个目标文件...

    成百上千个Java 源码DEMO 3(1-4是独立压缩包)

    EJB中JNDI的使用源码例子 1个目标文件，JNDI的使用例子，有源代码，可以下载参考，JNDI的使用，初始化Context,它是连接JNDI树的起始点，查找你要的对象，打印找到的对象，关闭Context…… ftp文件传输 2个目标文件...

    JAVA上百实例源码以及开源项目

    1个目标文件，JNDI的使用例子，有源代码，可以下载参考，JNDI的使用，初始化Context,它是连接JNDI树的起始点，查找你要的对象，打印找到的对象，关闭Context…… ftp文件传输 2个目标文件，FTP的目标是：（1）提高...

    JAVA上百实例源码以及开源项目源代码

    1个目标文件，JNDI的使用例子，有源代码，可以下载参考，JNDI的使用，初始化Context,它是连接JNDI树的起始点，查找你要的对象，打印找到的对象，关闭Context…… ftp文件传输 2个目标文件，FTP的目标是：（1）提高...

Magicbox
Global site tag (gtag.js) - Google Analytics