到官网下载压缩包:dTree 主页:http://destroydrop.com/javascripts/tree/

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

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

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

解压缩dtree.zip 包。  
dtree目录下包括这些文件:example01.html 、 dtree.js 、 api.html 、 dtree.css 和img目录       
注意:除了api.html之外,其它的文件都是必须拷贝的。api.html是dtree的函数介绍。  
有以下几部分: 
img文件夹: 包含树形菜单显示需要的图标 
api.html : 作者写的dtree帮助文档    
dtree.css: 树形菜单的样式 
dtree.js : js核心文件,代码都在其中 
打开example01.html文件  

     <link rel="StyleSheet" href="css/dtree.css" type="text/css" />   
     <script type="text/javascript" src="js/dtree.js"></script>   

必须引用的两个文件。  

生成树 节点的代码:  
      

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<html>
<head>
<title>Tree</title>
<link rel="StyleSheet" href="./css/dtree.css" type="text/css" /><!-- 引入css样式表 -->
<script type="text/javascript" src="./js/dtree.js"></script><!-- 引入js脚本 -->
</head>
<body>
<div class="dtree"><!--创建一个div层,指定class为“dtree”,此时该层就引用了dtree的样式 -->
<script type="text/javascript">
d = new dTree();//new一个树对象
//设置树的节点及其相关属性
d.add(0,-1,'教学资料管理');
d.add(1,0,'个人信息','www.baidui.com');
d.add(2,0,'课件管理','www.baidui.com');
d.add(3,1,'文档管理','www.baidui.com');
d.add(4,0,'教学方案','www.baidui.com');
d.add(5,3,'退出','www.baidui.com');
d.add(6,5,'论文','www.baidui.com');
d.add(7,0,'概要设计','www.baidui.com');
d.add(8,1,'试卷','www.baidui.com');
d.add(02,2,'专业课件','www.hao123.com');
d.add(03,3,'系文件','www.oracle.com');
//config配置,设置文件夹不能被链接,即有子节点的不能被链接。
//d.config.folderLinks=false;
document.write(d);
</script>
</div>
</body>
</html>


d.add(0,-1,’My example tree’);  
      这一句为树添加了一个根节点,显示名称为’My example tree’     d.add(1,0,’Node 1’,’example01.html’);  
     这一句在树的根节点下面添加了一个子节点。(d.add()方法的参数具体含义可参见api.html文件)  

add(parameters):添加一个树节点,实际参数有9个add(id,pid,name,url,title,target,icon,iconOpen,open); 常用的: 
位置 参数别名 类型 功能      
1 id int 节点自身的id(唯一) 
2 pid int 节点的父节点id 
3 name string 节点显示在页面上的名称 
4 url string 节点的链接地址 
5 title string 鼠标放在节点上显示的提示信息 
6 target string 节点链接所打开的目标frame 
7 icon string 节点关闭状态时显示的图标 
8 iconOpen string 节点打开状态时显示的图标 
9 open bool 节点第一次加载是否打开 

属性菜单使用说明   
函数   
add()   
向树里添加一个节点   
只能在树被创建之前调用.   
必须 id, pid, name   
参数   
名字        类型       描述   
id        Number       唯一的ID号   
pid       Number       判定父节点的数字,根节点的值为 -1   
name      String       节点的文本标签   
url       String       节点的Url   
title     String       节点的Title   
target    String       节点的target   
icon      String       用做节点的图标,节点没有指定图标时使用默认值   
iconOpen     String    用做节点打开的图标,节点没有指定图标时使用默认值   
open     Boolean     判断节点是否打开   
例子   
mytree.add(1, 0, ’My node’, ’node.html’, ’node title’, ’mainframe’, ’img/musicfolder.gif’);   

openAll()   
打开所有节点   
可在树被创建以前或以后调用.   
例子   
mytree.openAll();   

closeAll()   
关闭所有节点   
可在树被创建以前或以后调用.   
例子   
mytree.closeAll();   

openTo()   
Opens the tree to a certain node and can also select the node.   
只能在树被创建以后调用..   
参数   
名字        类型        描述   
id         Number       节点唯一的ID号   
select     Boolean     判断节点是否被选择   
例子   
mytree.openTo(4, true);   

配置   config
变量                 类型             默认值              描述   
target              String             true            所有节点的target   
folderLinks         Boolean            true           文件夹可链接   
useSelection        Boolean            true           节点可被选择(高亮)   
useCookies          Boolean            true           树可以使用cookies记住状态   
useLines            Boolean            true           创建带线的树   
useIcons            Boolean            true           创建带有图标的树   
useStatusText       Boolean            false          用节点名替代显示在状态栏的节点url   
closeSameLevel      Boolean            false          只有一个有父级的节点可以被展开,当这个函数可用时openAll() 和 closeAll() 函数将不可用   
inOrder             Boolean            false          如果父级节点总是添加在子级节点之前,使用这个参数可以加速菜单显示.   
例子   
mytree.config.target = "mytarget";  

tree.config.closeSameLevel=true;表示打开某级节点时,该级其他处于打开状态的同级节点会被关闭