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

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

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

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

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

首先看看model 类，如下：

  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 的 数据库操作类，里面构造了一些数据，并有一些得到数据的方法，如下：

  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. }

然后再看下页面，

  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. <%@page import="dtree.db.NodeDb"%>
  7. <%@page import="java.util.Iterator"%><html>
  8. <head>
  9. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  10. <title>Show Tree</title>
  11. <link rel="StyleSheet" type="text/css" href="dtree.css" />
  12. <script type="text/javascript" src="dtree.js"></script>
  13. </head>
  14. <body>
  15. <%
  16. NodeDb ndDb = new NodeDb();
  17. Iterator<Node> treeIt = ndDb.getNodes().iterator();
  18. StringBuffer sbf = new StringBuffer();
  19. // 定义js树对象
  20. sbf.append("dtree = new dTree(\"dtree\");");
  21. while(treeIt.hasNext()){
  22. 	Node nd = treeIt.next();
  23. 	// 增加 js树结点
  24. 	sbf.append("dtree.add("+nd.getId()+","+nd.getPId()+",\""+nd.getName()+"\");");
  25. }
  26. // 输出js树
  27. sbf.append("document.write(dtree);");
  28. %>
  29.  
  30. <script type="text/javascript">
  31. // 执行生成的js字符串
  32. eval('<%=sbf.toString()%>');
  33. </script>
  34.  
  35. </body>
  36. </html>

就这样几步，我们并能通过从（模拟）数据库里取出的数据动态的在页面上生成我们的树，如下显示：

到此为止，一个完整的树已经建立完成，可以看到这个过程非常简单。

但上面的页面代码中有个问题，就是包含了大量的逻辑代码，为了减少这些代码以让页面代码更象“页面代码”，将上面的例子作如下改变：

首先，我们在 数据库操作类里新增一个方法，很显然该方法便是用来生成 js 字符串的，如下：

  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. 	}

然后再看看这次少得可怜的页面代码：

  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动态生成树(后台处理，简化前台操作)的更多相关文章

  1. dTree 动态生成树

    http://luohua.iteye.com/blog/451453 dTree 主页:http://destroydrop.com/javascripts/tree/ dTree是个很方便在页面生 ...

  2. ios 从前台返回到回台 从后台返回到前台 或者 支付宝支付订单后 对界面进行操作

    正常情况下,在AppDelegate中实现下面两个方法,能够监听从后台恢复到前台 - (void)applicationDidEnterBackground:(UIApplication *)appl ...

  3. SAP跟踪前台操作导致的后台查询语句

    SAP跟踪前台操作导致的后台查询语句,通过这个可以查看前台对应了后台的数据库表,然后可以通过se11查看表内容,也可以删除表内容. 在sap升级的时候,首先需要拷贝正式的sap系统,然后将拷贝的系统中 ...

  4. jstree动态生成树

    前篇文章简单介绍了静态生成树,这篇文章将通过后台把数据通过json形式传到前台,进行动态生成树. 本篇的程序所用框架为Spring MVC,可以很方便的通过controller层传json到前台. 前 ...

  5. 【SAP业务模式】之ICS（三）：前台操作

    本片博文开始讲解SAP前台是如何实现ICS业务模式的. 一.VA01开立销售订单 我这里为了方便,创建了一个订单类型ZMIV作为公司间销售的订单类型,其实公司间销售订单跟标准的销售订单是一致的.同时, ...

  6. ASP.NET中后台数据和前台控件的绑定

    关于ASP.NET中后台数据库和前台的数据控件的绑定问题 最近一直在学习个知识点,自己创建了SQL Server数据库表,想在ASP.NET中连接数据库,并把数据库中的数据显示在前台,注意,这里的数据 ...

  7. java怎样把后台值传到前台

    后台代码:if(this.Request["type"]!=null){aaa=this.Request["type"].ToString(); try{bbb ...

  8. 八：SpringBoot-集成JPA持久层框架，简化数据库操作

    SpringBoot-集成JPA持久层框架,简化数据库操作 1.JPA框架简介 1.1 JPA与Hibernate的关系: 2.SpringBoot整合JPA Spring Data JPA概述: S ...

  9. Luffy /2/ 后台数据库配置&前台创建配置

    目录 二次封装Response 后台数据库配置 命令操作 pycharm连接 django操作mysql 方式一 方式二 user表设计 前台创建及配置 全局css样式配置 配置文件配置 二次封装Re ...

随机推荐

  1. 17.3.12----math模块

    1----math模块提供很多的数学运算功能: math.pi   圆周率 math.e    那个自然常熟就是e^x,的这个e math.ceil(i)  对i向上取整 math.floor(i) ...

  2. Ubuntu--- 安装VMware 报错 Build enviroment error!

    今天从 Ubuntu 安装 VMware 下载并安装过程都很顺利,但是在启动过程中报错误,所以总结如下: 报错原因:VMware 第一次启动需要编译一些模块,但是刚开始并没有安装 gcc 所以便报无法 ...

  3. 查看jks文件中的签名

    1. 打开CMD命令行进入本机安装的jdk或jre下的bin目录. 2. 下来看图 keytool -list -v -keystore C:\Users\Administrator\Desktop\ ...

  4. day66-CSS伪类选择器和伪元素选择器

    1. 伪类选择器:hover 和 focus 比较常用. 1.1 hover:把鼠标移动到内容迈腾2020款TSI DSG舒适型的时候,字体变成了红色. html: <body> < ...

  5. redis 会丢数据吗

    不管是以前的主从模式(哨兵模式),还是现在的集群模式,因为都用了slave of 同步; 而slave of 同步会丢弃本地数据,直接用对方的数据来覆盖本地,所以会丢失数据 1.主备网络不通,后续主节 ...

  6. Huffman编码实验

    一. 实验目的 熟练掌握哈夫曼树的建立和哈夫曼编码的算法实现. 二. 实验内容 根据哈夫曼编码的原理,编写一个程序,在用户输入结点权值的基础上求赫夫曼编码,并能把给定的编码进行译码. 三. 实验要求 ...

  7. BTree非递归

    preorder void PreOrder(BTNode* b) { BTNode* p = b; SqStack* st; InitStack(st); if (b != NULL) { Push ...

  8. callable和runnable的区别

    Runnable接口源码 @FunctionalInterface public interface Runnable { /** * When an object implementing inte ...

  9. iOS之input file调用相册控制器消失跳转到登陆页

    最近在做一个app要用到H5,其中有一个需求是要点击H5的的控件弹出系统相册,通过在H5的input file 中定义<input type="file" class=&qu ...

  10. Matlab高级教程_第二篇：Matlab相见恨晚的模块_02_全局变量的妙用_遍历穿透

    1 比如我这边写了一个函数,这个函数中有一个变量作为参数,给定这个参数一个值,然后这个函数返回给我一个值.但是,我写这函数的时候,这个传参我不写到函数里面.可以通过全局变量的方式进行在外部穿透遍历. ...