`
zengshaotao
  • 浏览: 786795 次
  • 性别: 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的两个方法.动态添加 ...
评论
发表评论

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

相关推荐

    layui dtree树形结构

    在这个场景中，我们看到的"layui dtree树形结构"指的是在用户点击一个文本框时，会弹出一个下拉框，下拉框内显示的是一个层次分明的树形结构。这种设计可以方便用户从多个选项中选择一个或多个层级相关的项目。 ...

    使用DTREE构建树

    1. 静态树构建： 静态树通常在程序初始化时构建，其结构和内容在程序运行过程中不会改变。构建静态树主要涉及以下步骤： - **数据准备**：确定树的节点和它们之间的关系。这通常涉及到将数据结构化为层次形式，如...

    dtree 树结构 前端

    【dtree 树结构 前端】是一种在前端开发中常见的数据展示方式，它用于构建和展现层次化的数据结构，比如文件...通过理解和掌握这些知识点，开发者可以有效地在前端项目中实现和优化dtree树结构，提供良好的用户体验。

    dtree树形代码案例

    标题中的“dtree树形代码案例”指的是使用dtree库创建树形结构的代码示例。dtree通常是一个JavaScript库，特别与jQuery结合使用，用于在网页上展示层次化的数据，如目录结构、组织架构或者导航菜单等。这种树形结构...

    Dtree目录树下载

    【DTree目录树下载】是针对前端开发人员的一款强大且美观的树形JavaScript代码库，主要用在构建具有层级结构的目录展示。DTree以其高效的功能和优雅的样式设计，深受开发者喜爱，常用于网站导航、文件管理器、组织...

    一种dtree树用控件实现的

    【dtree树控件详解】 在IT领域，dtree（决策树）经常被用作数据可视化和交互式操作的一种工具，特别是在网页应用和图形用户界面设计中。dtree树控件是一种用于展示层次结构数据的组件，它允许用户通过节点的展开和...

    dtree树 struts1+hibernate+dtree

    "dtree树 struts1+hibernate+dtree"这个项目标题提及了三个关键组件：dtree、Struts1和Hibernate。下面将详细解释这三个技术以及它们在Web开发中的应用。 首先，dtree（通常指的是JTreeWidget或类似的树形控件）是...

    最新的dtree树，复选框，单选都有！

    标题中的“最新的dtree树”可能是指该压缩包包含了最新版本或更新的决策树实现，这可能是某个开源库或框架的更新。复选框和单选按钮的提及暗示这个dtree可能与用户界面（UI）交互有关，特别是用于数据筛选或配置选择...

    dtree 树 不错的 个人感觉

    标题中的“dtree 树 不错的 个人感觉”似乎是在赞赏一个名为“dtree”的树形数据结构或相关的库。在IT领域，"dtree"通常指的是决策树（Decision Tree），这是一种常用的数据分析和机器学习算法。它通过构建树状模型...

    dtree树forhtml

    在Web开发领域，"dtree树forhtml"是一种常见的用于构建HTML页面中树形结构的插件。这种插件能够帮助开发者轻松地创建交互式的、层次化的数据展示，常见于目录浏览、组织结构图或者文件系统等场景。下面将详细探讨...

    dtree(树结构)

    【dtree(树结构)——数据结构中的基石】 在计算机科学中，树结构是一种非常重要的非线性数据结构，dtree通常指的是决策树（Decision Tree）或者数据树（Data Tree）。这种结构以其独特的层次关系，模拟了现实世界中...

    Dtree动态树菜单

    Dtree通常是一个JavaScript库或者框架的一部分，用于构建可扩展的、交互式的树形菜单。这样的菜单在网页应用中特别有用，特别是那些需要管理层次结构数据的系统，如文件管理系统、组织结构图、权限分配等。Dtree...

    Dtree树形结构连接数据库的具体实现代码

    ### Dtree树形结构连接数据库的具体实现方法 #### 一、背景介绍 在现代Web开发中，树形结构是常用的数据展示方式之一，特别是在管理后台系统中用来展示组织架构、目录结构等。本文将详细介绍如何在JSP环境中利用...

    Dtree树形结构菜单

    **Dtree：构建优雅的树形结构菜单** 在IT领域，树形结构是一种常见的数据组织方式，它模拟了自然界中的树状层次关系，用于表示具有层级关系的数据。Dtree是专门用于创建美观、多级的树形结构导航菜单的工具，广泛...

    Dtree树菜单 动态树

    在实现上，DTree可能采用递归的方式来构建树结构。每个节点包含一个标识（ID）、文本、状态（是否展开）、子节点列表等属性。当用户点击节点时，JavaScript代码会根据节点的状态来决定是否请求子节点数据并渲染到...

    dtree js树形菜单 你懂的

    总结来说，`dtree`作为一个JavaScript树形菜单组件，以其简洁的API和良好的兼容性，为开发者提供了构建高效、交互性强的树形菜单的工具。无论你是新手还是经验丰富的开发者，都能快速上手并根据项目需求进行定制，...

    带复选框的dtree树

    【标题】：“带复选框的dtree树”是指一种数据可视化工具，它结合了决策树（dtree）与复选框的交互功能。在数据分析和机器学习领域，决策树是一种常用的模型，用于通过一系列规则对数据进行分类或回归。而这里的“带...

    利用dtree创建树

    本文将深入探讨如何利用dtree创建树结构，以及如何从数据库中读取节点信息构建树。 首先，我们要理解dtree的基本概念。决策树是一种监督学习算法，通过学习数据中的特征来建立一个模型，该模型可以对新的数据进行...

    dtree树 学习 书籍

    【dtree树学习详解】 在IT领域，决策树（Decision Tree，简称dtree）是一种广泛应用的监督学习模型，尤其在分类问题中表现出色。决策树通过构建一系列规则，以树状结构来表示输入特征与输出类别之间的关系。这种...

    dtree树控件的资料

    **dtree树控件详解** dtree是一种常用于Web应用中的图形化用户界面元素，它以树状结构展示数据，便于用户浏览和操作层级关系的数据。这种控件在各种管理系统、文件系统、导航菜单等场景中广泛应用。在本文中，我们...

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