dTree是一个免费的JS树形菜单，使用简单，界面制作的也很专业。

dtree树形菜单

不同的项目需求，造成菜单树的各种变化，因此在介绍dTree的同时，本文着重讲述如何改造dTree，以达到为不同项目所用的目的。

dTree 分析

dTree的使用非常简单，在下载的dTree压缩文件中（2.05），要用的只有三个：

1. dtree.js : dtree功能脚本
2. dtree.css : 样式文件
3. img文件夹 : 存放dtree使用的图标，参看下图：

dtree图标

很容易就可以编写出类似上面的dtree菜单树，源代码如下：

分析dtree.js，在dTree中只有两个结构：”节点”和”树”，dTree的所有功能和构造都在于这两个结构的属性和行为中，Node比较简单，只包含节点的基本属性和一个构造方法，所以对dTree的分析和研究的重点可放在dTree结构中。

Attributes(属性) 

id : int 每个节点都有唯一ID，增加节点时需要手工定义一个ID。 
pid : int 父节点ID，根节点的父节点是-1。 
name : String 节点名称（显示名字） 
url : String 节点URL（鼠标点击跳转地址） 
title : String 鼠标移动到节点上显示的文字 
target : String 页面跳转所在的frame 
icon : String 节点关闭时显示的图标地址 
iconOpen : String 节点打开时显示的图标地址 
_io : boolean 节点是否已打开，默认值false。 
_is : boolean 节点是否被选中，默认值false。 
_ls : boolean 是否是最后一个节点，默认值false。 
_hc : boolean 是否有子节点，默认值false。 
_ai : int 在树的节点数组中的下标(位置)，默认值0。 
_p : Node 父节点对象，默认值null。 

Operations(行为) 
Node(id, pid, name, url, title, target, icon, iconOpen, open) : void 构造方法，创建一个节点对象。open对应_io，表示节点是否已经打开。 

节点类图

dTree 
Attributes(属性) 
obj : String 树的名称，在创建树时定义。 
aNodes : Node[] 树中的节点数组。 
aIndent : [] 数组。 
root : Node 根节点。 
selectedNode : Node 当前选择的节点。 
selectedFound : boolean 是否有选中节点，默认false。 
completed : boolean 树构建html是否已完成完成，默认false。 
config : Hash数组 树的配置 
target: 设置所有节点的target，默认null 
folderLinks: 目录节点是否可以有链接,默认true 
useSelection: 节点是否可以被选择(高亮),默认true 
useCookies: 设置使用cookies保存树的状态,默认true 
useLines: 是否显示路径点线,默认true 
useIcons: 是否显示图标,默认true 
useStatusText: 是否在状态栏输出节点文字（替换原来的url显示）,默认false 
closeSameLevel: 是否自动关闭兄弟节点（当打开本节点时）,注意设置true时，openAll()和closeAll()不能工作，默认false 
inOrder: 如果父节点总是在子节点之前加入树，设置true有更好的效率，默认false 
icon : Hash数组 图标 
root: 根,默认'img/base.gif' 
folder: 关闭的文件夹,默认'img/folder.gif' 
folderOpen: 打开的文件夹,默认'img/folderOpen.gif' 
node: 文件,默认'img/page.gif' 
empty: 空,默认'img/empty.gif' 
line: 竖线,默认'img/line.gif' 
join: 丁线,默认'img/join.gif' 
joinBottom: 直角线,默认'img/joinbottom.gif' 
plus: 加号丁线,默认'img/plus.gif' 
plusBottom: 加号直角线,默认'img/plusbottom.gif' 
minus: 减号丁线,默认'img/minus.gif' 
minusBottom: 减号直角线,默认'img/minusbottom.gif' 
nlPlus: 无线加号,默认'img/nolines_plus.gif' 
nlMinus: 无线减号,默认'img/nolines_minus.gif' 

Operations(行为) 

dTree(objName) : void 构造方法，创建树对象。objName: 树名称。 
add(id, pid, name, url, title, target, icon, iconOpen, open) : void 在树中增加一个节点，节点对象添置到aNodes数组末尾。参数open表示节点是否已经打开。 
openAll() : void 打开树中所有节点。此方法由oAll方法实现。 
closeAll() : void 关闭树中所有节点。此方法由oAll()方法实现。 
toString() : String 构建树的html。此方法主要由addNode()方法实现。返回：html。 
addNode(pNode) : String 构建pNode的所有子节点的html。参数pNode: 父节点对象。返回：html。 
node(node, nodeId) : String 构建node的html。参数node: 节点对象；nodeId: 节点在节点数组aNodes中的位置。返回：html。 
indent(node, nodeId) : String 构建node前面的空格、点线、加减号的html。参数node: 节点对象；nodeId: 节点在节点数组aNodes中的位置。返回：html。 
setCS(node) : void 检查并设置:1. node节点是否有子节点; 2. node节点是否是节点数组aNodes中的最后一个。参数node: 节点对象。 
getSelected() : int 从cookies中获取已选中的节点，返回：节点id或null(没有选中任何节点)。 
s(id) : void 鼠标点击节点发生的动作，高亮选择的节点，并记录在cookies中。参数id： 节点在节点数组aNodes中的位置 
o(id) : void 鼠标点击+-图标发生的动作，打开或关闭指定节点，并记录在cookies中。参数id： 节点在节点数组aNodes中的位置 
oAll(status) : void 打开或关闭所有节点，并将状态记录在cookies中。参数status：true打开 fasle关闭 
openTo(nId, bSelect, bFirst) : void 打开指定节点，并将状态记录在cookies中。参数nId：节点ID或节点在节点数组aNodes中的位置；bSelect：true-打开同时被选中，false-打开不被选中；bFirst：true-nId是在节点数组aNodes中的位置，false-nId是节点ID。 
closeLevel(node) : void 关闭和node同级别以及他们的下级的所有节点。参数node：节点对象。 
closeAllChildren(node) : void 关闭node的所有子节点。参数node：节点对象。 
nodeStatus(status, id, bottom) : void 改变节点的状态（关闭 或 打开）。参数status： 要设置的状态(true:打开 false:关闭)；id: 节点ID；bottom: true-是最后一个节点。 
clearCookie() : void 清除cookies。 
setCookie(cookieName, cookieValue, expires, path, domain, secure) : void 记录入cookies。 
getCookie(cookieName) : String 从cookies中读取。 
updateCookie() : void 将所有打开的节点ID记录在cookies中。 
isOpen(id) : boolean 根据cookies的记录，判断一个节点是已经打开。参数id：节点id