dTree 动态生成树

最新推荐文章于 2024-04-17 10:03:41 发布

iteye_21318

最新推荐文章于 2024-04-17 10:03:41 发布

阅读量319

点赞数

分类专栏： ajax学习文章标签： JavaScript CSS PHP HTML C ViewUI

ajax学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

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

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

iteye_21318

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
dTree 动态生成树

dTree 主页：http://destroydrop.com/javascripts/tree/ dTree是个很方便在页面生成树的 js 控件，如果你下载了，我猜里在几分钟之内便能在页面上显示出一颗树来。它本身给的例子是通过一些静态数据构造树，下面我说一种通过查询的数据动态构造树的方法。例子里没有真实的数据库操作，而是用一个模拟的数据库操作类替代。在该例子中为了简便和...
复制链接

扫一扫

专栏目录