dtree树形菜单
所谓“兵无常势，水无常形”，不同的项目需求，造成菜单树的各种变化，因此在介绍dTree的同时，本文着重讲述如何改造dTree，以达到为不同项目所用的目的。
dTree 分析
dTree的使用非常简单，在下载的dTree压缩文件中（2.05），要用的只有三个：
1. dtree.js : dtree功能脚本
2. dtree.css : 样式文件
3. img文件夹 : 存放dtree使用的图标，参看下图：
dtree图标
很容易就可以编写出类似上面的dtree菜单树，源代码如下：
-
<html>
-
<head>
-
<link rel="StyleSheet" href="dtree.css" type="text/css" />
-
<script type="text/javascript" src="dtree.js"></script>
-
</head>
-
<body>
-
<script type=
"text/javascript">
-
<!–
-
d =
newdTree
(‘d’);
//创建树，名称为’d'（注意和树的对象变量名称要一致）
-
d.
add(0,
-1,
‘My example tree’);
//在树中增加节点。节点id是0，父节点是-1(根节点)，节点文字’My example tree’
-
d.
add(1,
0,
‘Node 1′,
‘default.html’);
//根节点的子节点(父节点是0)，’default.html’表示节点链接(鼠标点击页面跳转url)
-
d.
add(2,
0,
‘Node 2′,
‘default.html’);
-
d.
add(3,
1,
‘Node 1.1′,
‘default.html’);
-
d.
add(4,
0,
‘Node 3′,
‘default.html’);
-
d.
add(5,
3,
‘Node 1.1.1′,
‘default.html’);
-
d.
add(6,
5,
‘Node 1.1.1.1′,
‘default.html’);
-
d.
add(7,
0,
‘Node 4′,
‘default.html’);
-
d.
add(8,
1,
‘Node 1.2′,
‘default.html’);
-
d.
add(9,
0,
‘My Pictures’,
‘default.html’,
‘Pictures I\’ve taken over the years’,
”,
”,
‘img/imgfolder.gif’);
//’Pictures I\’ve taken over the years’是链接title，指定图标
-
d.
add(10,
9,
‘The trip to Iceland’,
‘default.html’,
‘Pictures of Gullfoss and Geysir’);
-
d.
add(11,
9,
‘Mom\’s birthday’,
‘default.html’);
-
d.
add(12,
0,
‘Recycle Bin’,
‘default.html’,
”,
”,
‘img/trash.gif’);
-
document.
write(d
);
//输出dtree的html（显示）
-
//–>
-
</script>
-
</body>
-
</html>
分析dtree.js，在dTree中只有两个结构：”节点”和”树”，dTree的所有功能和构造都在于这两个结构的属性和行为中，Node比较简单，只包含节点的基本属性和一个构造方法，所以对dTree的分析和研究的重点可放在dTree结构中。
节点类图
| dTree |
|---|
|
|
Operations(行为)
- dTree(objName) : void
- add(id, pid, name, url, title, target, icon, iconOpen, open) : void
- openAll() : void
- closeAll() : void
- toString() : String
- addNode(pNode) : String
- node(node, nodeId) : String
- indent(node, nodeId) : String
- setCS(node) : void
- getSelected() : int
- s(id) : void
- o(id) : void
- oAll(status) : void
- openTo(nId, bSelect, bFirst) : void
- closeLevel(node) : void
- closeAllChildren(node) : void
- nodeStatus(status, id, bottom) : void
- clearCookie() : void
- setCookie(cookieName, cookieValue, expires, path, domain, secure) : void
- getCookie(cookieName) : String
- updateCookie() : void
- isOpen(id) : boolean
|
树类图
提示：
鼠标移动到类图中的属性或方法上时，会显示详细信息。
dTree的工作原理
类似dTree这样的动态的客户端web插件，实现起来基本离不开xhtml和javascript，用一段简单的代码来探索一下dTree的工作原理：
-
<html>
-
<head>
-
<link rel="StyleSheet" href="dtree.css" type="text/css" />
-
<script type="text/javascript" src="dtree.js"></script>
-
</head>
-
<body>
-
<script type=
"text/javascript">
-
<!--
-
d =
newdTree
('d');
//创建树，名称为'd'
-
d.
add(0,
-1,
'根节点');
-
d.
add(1,
0,
'节点 1',
'node1.html');
-
d.
add(2,
0,
'节点 2',
'node2.html');
-
d.
add(3,
1,
'节点 1.1',
'node1_1.html');
-
d.
add(4,
3,
'节点 1.1.1',
'node1_1_1.html');
-
document.
write(d
);
-
-
functionshow
()
-
{
-
alert(d
);
-
}
-
//-->
-
</script>
-
-
<input type="button" value="显示html" onclick="show()">
-
</body>
-
</html>
显示的“树”如下图：
点击下方的“显示html”按钮，会在alert对话框中显示整个树的html代码，整理后如下：
-
<divclass="dtree">
-
<divclass="dTreeNode">
-
<imgid="id0"src="img/base.gif"alt=""/>根节点
</a>
-
</div>
-
<divid="dd0"class="clip"style="display:block;">
-
<divclass="dTreeNode">
-
<ahref="javascript: d.o(1);"><imgid="jd1"src="img/minus.gif"alt=""/></a>
-
<imgid="id1"src="img/folderopen.gif"alt=""/>
-
<ahref="javascript: d.o(1);"class="node">节点 1
</a>
-
</div>
-
<divid="dd1"class="clip"style="display:block;">
-
<divclass="dTreeNode">
-
<imgsrc="img/line.gif"alt=""/>
-
<ahref="javascript: d.o(3);"><imgid="jd3"src="img/minusbottom.gif"alt=""/></a>
-
<imgid="id3"src="img/folderopen.gif"alt=""/>
-
<ahref="javascript: d.o(3);"class="node">节点 1.1
</a>
-
</div>
-
<divid="dd3"class="clip"style="display:block;">
-
<divclass="dTreeNode">
-
<imgsrc="img/line.gif"alt=""/>
-
<imgsrc="img/empty.gif"alt=""/>
-
<imgsrc="img/joinbottom.gif"alt=""/>
-
<imgid="id4"src="img/page.gif"alt=""/>
-
<aid="sd4"class="node"href="node1_1_1.html"onclick="javascript: d.s(4);">节点 1.1.1
</a>
-
</div>
-
</div>
-
</div>
-
<divclass="dTreeNode">
-
<imgsrc="img/joinbottom.gif"alt=""/>
-
<imgid="id2"src="img/page.gif"alt=""/>
-
<aid="sd2"class="node"href="node2.html"onclick="javascript: d.s(2);">节点 2
</a>
-
</div>
-
</div>
-
</div>
仔细观察，树中每个节点的html构造是相似的：
-
<!-- 根节点 -->
-
<divclass="dTreeNode">
-
<imgid="id0"src="img/base.gif"alt=""/>根节点
</a>
-
</div>
-
<divid="dd0"class="clip"style="display:block;">
-
......
-
</div>
-
<!-- 节点 1 -->
-
<divclass="dTreeNode">
-
<ahref="javascript: d.o(1);"><imgid="jd1"src="img/minus.gif"alt=""/></a>
-
<imgid="id1"src="img/folderopen.gif"alt=""/>
-
<ahref="javascript: d.o(1);"class="node">节点 1
</a>
-
</div>
-
<divid="dd1"class="clip"style="display:block;">
-
......
-
</div>
-
<!-- 节点 1.1 -->
-
<divclass="dTreeNode">
-
<imgsrc="img/line.gif"alt=""/>
-
<ahref="javascript: d.o(3);"><imgid="jd3"src="img/minusbottom.gif"alt=""/></a>
-
<imgid="id3"src="img/folderopen.gif"alt=""/>
-
<ahref="javascript: d.o(3);"class="node">节点 1.1
</a>
-
</div>
-
<divid="dd3"class="clip"style="display:block;">
-