dtree是一个由JavaScript编写成的简单的树形菜单组件，目前免费并且开源。
1)从官网上下载dtree的源文件压缩包“dtree.zip”，包内包含以下几个文件：
img文件夹： 包含树形菜单显示需要的图标
api.html ：dtree帮助文档
dtree.css： 树形菜单的样式
dtree.js ： js核心文件，代码都在其中
example01.html：树形菜单实例(看完该文件应该就会模仿这用了)
接下来就来看看example01.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="StyleSheet" href="dtree.css" type="text/css" />
<script type="text/javascript" src="dtree.js"></script>
</head>
<body>
<h1><a href="/">Destroydrop</a> » <a href="/javascripts/">Javascripts</a> » <a href="/javascripts/tree/">Tree</a></h1>
<h2>Example</h2>
<div class="dtree">
<a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a>
<script type="text/javascript">
<!-- d = new dTree('d'); d.add(0,-1,'My example tree'); d.add(1,0,'Node 1','example01.html'); d.add(2,0,'Node 2','example01.html'); d.add(3,1,'Node 1.1','example01.html'); d.add(4,0,'Node 3','example01.html'); d.add(5,3,'Node 1.1.1','example01.html'); d.add(6,5,'Node 1.1.1.1','example01.html'); d.add(7,0,'Node 4','example01.html'); d.add(8,1,'Node 1.2','example01.html'); d.add(9,0,'My Pictures','example01.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif'); d.add(10,9,'The trip to Iceland','example01.html','Pictures of Gullfoss and Geysir'); d.add(11,9,'Mom\'s birthday','example01.html'); d.add(12,0,'Recycle Bin','example01.html','','','img/trash.gif'); document.write(d); //-->
</script>
</div>
<a href="mailto:drop@destroydrop.com">©2002-2003 Geir Landrö</a>
</body>
</html>
其中
<script type="text/javascript" src="dtree.js"></script>
就是导入dTree的主要文件dtree.js；
该部分定义一个树d d.add();为为树添加节点其中的参数具体为
位置 参数别名 类型 功能
id int 节点自身的id（唯一）
pid int 节点父节点的id
name int 节点显示在页面的名称
url string 节点的链接地址
title string 鼠标烦在节点上显示的提示信息
target string 节点链接锁打开的目标frame
icon string 节点关闭状态时显示的图标
iconOpen string 节点打开状态时显示的图标
open bool 节点第一次加载是否打开
最后只有在要显示树的地方输入以下代码并能显示树
<script type="text/javascript">
document.write(d);
</script>
另外在上面我们还看到
<a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a>
这里其实是dTree的一些函数。它的一些函数和功能如下：
openAll()
打开全部节点，可在树对象创建前或创建后调用
closeAll()
关闭全部节点，可在树对象创建前或创建后调用
openTo(id,select)
打开指定 id的节点，可以传两个参数：
id 指定需要打开的节点的唯一id
select 是否让该节点处于选中状态
<%@ page language="java" contentType="text/html; charset=UTF-8"
import="java.util.*,com.qiyi.po.*" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Tree</title>
<link rel="StyleSheet" href="dtree.css" type="text/css" />
<script type="text/javascript" src="dtree.js"></script>
</head>
<body>
<div class="dtree">
<p><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>
<script type="text/javascript">
d = new dTree('d');
d.add(0,-1,'My example tree');
<s:iterator value="list">
d.add(<s:property value="id"/>,<s:property value="pid"/>,'<s:property value="title"/>');
</s:iterator>
document.write(d);
</script>
</div>
</body>
</html>
