dTree动态生成树(后台处理，简化前台操作)
dTree是个很方便在页面生成树的 js 控件，如果你下载了，我猜里在几分钟之内便能在页面上显示出一颗树来。
它本身给的例子是通过一些静态数据构造树，下面我说一种通过查询的数据动态构造树的方法。
例子里没有真实的数据库操作，而是用一个模拟的数据库操作类替代。
在该例子中为了简便和理解没有分为过多的层，仅有 页面显示层 和 模拟的 数据库层。
最后对页面上有逻辑代码的问题作了下改进。
首先看看model 类，如下：
public class Node {
private int id;
private String name;
private int pId;
public Node(){}
public Node(int id, String name, int pId){
this.id = id;
this.name = name;
this.pId = pId;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getPId() {
return pId;
}
public void setPId(int id) {
pId = id;
}
}
model 类很简单，并且只包含了构造一个树必要的几个属性，结点id，结点名字和结点父id。
下面再来看下上面 model 的 数据库操作类，里面构造了一些数据，并有一些得到数据的方法，如下：
public class NodeDb {
private static List<Node> treeList;
static{
treeList = new ArrayList<Node>();
Node n = new Node(0,"Book",-1);
treeList.add(n);
n = new Node(1,"Computer",0);
treeList.add(n);
n = new Node(2,"Java",1);
treeList.add(n);
n = new Node(3,"C#",1);
treeList.add(n);
n = new Node(4,"Php",1);
treeList.add(n);
n = new Node(5,"Thinking in Java",2);
treeList.add(n);
n = new Node(6,"Java Core",2);
treeList.add(n);
n = new Node(7,"Thinking in C#",3);
treeList.add(n);
n = new Node(8,"C# Core",3);
treeList.add(n);
n = new Node(9,"Thinking in Php",4);
treeList.add(n);
n = new Node(10,"Php Core",4);
treeList.add(n);
}
public List<Node> getNodes(){
return treeList;
}
}
然后再看下页面，
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="dtree.model.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <%@page import="dtree.db.NodeDb"%>
<%@page import="java.util.Iterator"%><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Show Tree</title>
<link rel="StyleSheet" type="text/css" href="dtree.css" />
<script type="text/javascript" src="dtree.js"></script>
</head>
<body>
<%
NodeDb ndDb = new NodeDb();
Iterator<Node> treeIt = ndDb.getNodes().iterator();
StringBuffer sbf = new StringBuffer();
// 定义js树对象
sbf.append("dtree = new dTree(\"dtree\");");
while(treeIt.hasNext()){
Node nd = treeIt.next();
// 增加 js树结点
sbf.append("dtree.add("+nd.getId()+","+nd.getPId()+",\""+nd.getName()+"\");");
}
// 输出js树
sbf.append("document.write(dtree);");
%> <script type="text/javascript">
// 执行生成的js字符串
eval('<%=sbf.toString()%>');
</script> </body>
</html>
就这样几步，我们并能通过从（模拟）数据库里取出的数据动态的在页面上生成我们的树，如下显示：
到此为止，一个完整的树已经建立完成，可以看到这个过程非常简单。
但上面的页面代码中有个问题，就是包含了大量的逻辑代码，为了减少这些代码以让页面代码更象“页面代码”，将上面的例子作如下改变：
首先，我们在 数据库操作类里新增一个方法，很显然该方法便是用来生成 js 字符串的，如下：
// 返回定义且生成页面树的 js 字符串
public String getJSTreeString(){
Iterator<Node> treeIt = getNodes().iterator();
StringBuffer sbf = new StringBuffer();
// 定义js树对象
sbf.append("dtree = new dTree(\"dtree\");");
while(treeIt.hasNext()){
Node nd = treeIt.next();
// 增加 js树结点
sbf.append("dtree.add("+nd.getId()+","+nd.getPId()+",\""+nd.getName()+"\");");
}
// 输出js树
sbf.append("document.write(dtree);"); return sbf.toString();
}
然后再看看这次少得可怜的页面代码：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@page import="dtree.db.NodeDb"%><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Show Tree</title>
<link rel="StyleSheet" type="text/css" href="dtree.css" />
<script type="text/javascript" src="dtree.js"></script>
</head>
<body> <script type="text/javascript">
eval('<%=new NodeDb().getJSTreeString()%>');
</script> </body>
</html>
这样改后，运行效果与前面完全一样。
上面的例子是对一个具体的业务生成的一颗树，如果我们的 model 改变，则需要完全再重写生成树的代码，所以可以考虑利用反射机制写一个通用的生成树的类，不过有没有这个必要也不好说，因为一个项目应该也不会有很多颗树，而且不用反射来的更快些。
其实生成一颗符合需求的树远远没有上面那么简单，不过 dTree 也能做出功能很强大的树来，这需要在构造结点时添加更多需要的属性，其实方法与上面还是一样，参考文档即可。
如果有其他方法请与我分享，谢谢。
dTree动态生成树(后台处理，简化前台操作)的更多相关文章
- dTree 动态生成树
http://luohua.iteye.com/blog/451453 dTree 主页:http://destroydrop.com/javascripts/tree/ dTree是个很方便在页面生 ...
- ios 从前台返回到回台 从后台返回到前台 或者 支付宝支付订单后 对界面进行操作
正常情况下,在AppDelegate中实现下面两个方法,能够监听从后台恢复到前台 - (void)applicationDidEnterBackground:(UIApplication *)appl ...
- SAP跟踪前台操作导致的后台查询语句
SAP跟踪前台操作导致的后台查询语句,通过这个可以查看前台对应了后台的数据库表,然后可以通过se11查看表内容,也可以删除表内容. 在sap升级的时候,首先需要拷贝正式的sap系统,然后将拷贝的系统中 ...
- jstree动态生成树
前篇文章简单介绍了静态生成树,这篇文章将通过后台把数据通过json形式传到前台,进行动态生成树. 本篇的程序所用框架为Spring MVC,可以很方便的通过controller层传json到前台. 前 ...
- 【SAP业务模式】之ICS（三）：前台操作
本片博文开始讲解SAP前台是如何实现ICS业务模式的. 一.VA01开立销售订单 我这里为了方便,创建了一个订单类型ZMIV作为公司间销售的订单类型,其实公司间销售订单跟标准的销售订单是一致的.同时, ...
- ASP.NET中后台数据和前台控件的绑定
关于ASP.NET中后台数据库和前台的数据控件的绑定问题 最近一直在学习个知识点,自己创建了SQL Server数据库表,想在ASP.NET中连接数据库,并把数据库中的数据显示在前台,注意,这里的数据 ...
- java怎样把后台值传到前台
后台代码:if(this.Request["type"]!=null){aaa=this.Request["type"].ToString(); try{bbb ...
- 八：SpringBoot-集成JPA持久层框架，简化数据库操作
SpringBoot-集成JPA持久层框架,简化数据库操作 1.JPA框架简介 1.1 JPA与Hibernate的关系: 2.SpringBoot整合JPA Spring Data JPA概述: S ...
- Luffy /2/ 后台数据库配置&前台创建配置
目录 二次封装Response 后台数据库配置 命令操作 pycharm连接 django操作mysql 方式一 方式二 user表设计 前台创建及配置 全局css样式配置 配置文件配置 二次封装Re ...
随机推荐
- 17.3.12--smtplib模块发送邮件__抄送，安装与下载
1-----在日常编程中,经常会用到处理email,发送,接收,抄送,下载邮件内容等操作,这时候就需要用Python的smtplib模块 smtplib与Email服务器(server)相互通信来传送 ...
- 吴裕雄--天生自然GPU配置：查看本机显卡是否支持GPU
NVIDIA的GF8级别以上的显卡才能支持physx物理加速(即GPU加速),ATI的显卡不支持. 打开:设备管理器,点击:显示适配器
- osi七层模型专题
OSI模型,即开放式通信系统互联参考模型,是国际标准化组织提出的一个试图是各种计算机或者通信系统在世界范围内互联为网络的标准框架.整个模型分为七层,物理层,数据链路层,网络层,传输层,会话层,表示层, ...
- npm安装依赖报 npm ERR! code Z_BUF_ERROR npm ERR! errno -5 npm ERR! zlib: unexpected end of file 这个错误解决方案
今天碰到了一个比较奇怪的问题,下载依赖有问题报错 npm ERR! code Z_BUF_ERROR npm ERR! errno -5 npm ERR! zlib: unexpected end o ...
- iOS Reactivecocoa（RAC）知其所以然（源码分析，一篇足以）
前言 如今RAC大行其道,对其讲解的博客也多不胜数,稍微有点经验的估计也已经对这个爽到不要不要的框架运用自如了,真正沉下来研究其实现原理的估计也不在少数,这里仅仅是记录一下自己的分析理解,更是在写这篇 ...
- git的基础使用
GIT """ 什么是git:版本控制器 - 控制的对象是开发的项目代码 代码开发时间轴:需求1 > 版本库1 > 需求2 > 版本库2 > 版本 ...
- 2.windows-oracle实战第二课 -用户管理
创建用户:在oracle中创建一个用户有create user语句,一般是具有dba(数据库管理员)的权限才能使用.用户创建在所在的实例数据库中. 给用户修改密码:passw 给别人修改密码需要dba ...
- P1010 幂次方 P1022 计算器的改良
P1010 幂次方 一.题目 https://www.luogu.org/problemnew/show/P1010 二.代码 #include<bits/stdc++.h> using ...
- Q_Go2
一.变量 1.1 变量的概念 变量是计算机语言中存储数据的抽象概念.变量的功能是存储数据.变量通过变量名访问. 变量的本质是计算机分配的一小块内存,专门用于存放指定数据,在程序运行过程中该数值可以发生 ...
- 6）HTML中a链接跳转地址怎么写
(1)看 thinkphp5的 附录--->助手函数 --->url 利用url进行书写地址跳转: 比如,你想跳转到cate控制器下的lst方法: <a href=" ...