在做管理系统时不可避免要用到导航树，这种东西只要一次做好，就可以随处运行，目前比较好的组件是dTree，原则上可以达到无限级，当然实际运行中4，5级就已经很多了，dTree的速度还是不错的，而且是JS实现，完全在客户端实现，不占用服务器资源。同时我们可以定制dTree的显示图标，那么我们就来看看怎么制作简单而又完整的导航树。
首先是下载dTree组件，本文附件中提供完整的示例，直接使用即可。下面我们先来看看dTree组件的结构：
这很简单，由一个JS文件，一个样式表文件和提供的基本图标构成，总体20几K，非常小，不占用网络流量。制作dTree的导航树时，也是一个HTML页面，那么我们就要在页面引入相关资源： Xml代码
1. <head>
2. <title>导航树</title>
3. <meta http-equiv="Content-Type" content="text/html; charset=utf8" />
4. <style type="text/css">@import url('components/dtree/dtree.css');</style>
5. <script type="text/javascript">var dtreeIconBasePath = "components/dtree";</script>
6. <script language="javascript" src="components/dtree/dtree.js"></script>
7. </head>下面就是导航树内容的编写了，做一个很简单很强大的示例：
Js代码
1. <script type="text/javascript">
2. var treeMenu = [
3. "用户管理"},
4. "用户列表", ico:"images/tico_way.gif",link:"user_list.html"},
5. "角色管理"},
6. "角色列表", ico:"images/tico_way.gif",link:"role_list.html"},
7. "用户角色", ico:"images/tico_way.gif",link:"ur_list.html"},
8. "信息管理"},
9. "新闻管理", ico:"images/tico_way.gif",link:"news_list.html"},
10. "公告管理", ico:"images/tico_way.gif",link:"bulletin_list.html"},
11. "系统邮件", ico:"images/tico_way.gif"},
12. "网络文件", ico:"images/tico_way.gif",link:"disk_list.html"}
13. ];
14. </script> 可以看出level是当前项目的层级，name就是显示的名称，ico是指定的图标，不指定时系统使用默认图标，link就是点击时进入的地址。当然非叶子节点元素一般是不需要地址的，那么不写就可以了，而叶子节点不写的话该行就是不可点击进入的效果。这是一个混合了1，2，3层的导航树。有了这些还不够，它们不能被解析，下面来看看解析的JS。
Js代码
1. <script type="text/javascript">
2. //建立新树
3. tree = new dTree('tree');
4. tree.config.target = "MainFrame";
5. tree.config.useCookies = false;
6. var selNum = -1;
7. var link = "";
8. //根目录
9. tree.add(0,-1,'系统管理中心', null, null, null, '', '');
10. var count = 0;
11. var pLevelIdArray = new Array();
12. pLevelIdArray[1] = 0;
13. var currLevel = 1;
14. for (var i=0; i<treeMenu.length; i++) {
15. var item = treeMenu[i];
16. var itemLevel = item.level;
17. pLevelIdArray[itemLevel+1] = ++count;
18. if (item.link!=null && item.link!="") {
19. if (item.ico!=null) {
20. null, null, item.ico, item.ico);
21. else {
22. tree.add(count, pLevelIdArray[itemLevel], item.name, item.link);
23. }
24. else {
25. if (item.ico!=null) {
26. null, null, null, item.ico, item.ico);
27. else {
28. tree.add(count, pLevelIdArray[itemLevel], item.name);
29. }
30. }
31. if (item.select) {
32. selNum = count;
33. link = item.link;
34. }
35. }
36. document.write(tree);
37. tree.openAll();
38. if (selNum != -1) {
39. true);
40. "MainFrame"].location.href=link;
41. }
42. </script>这样就可以了，主要是这里用了frame，页面的显示会在MainFrrame中显示，这是一般管理系统的结构，左侧导航树，右侧主显示区域，上侧是登录信息和模块切换，下侧就是版权声明了。
这样就能正常显示一棵树了，但是有时我们需要折叠和展开导航树，这个也很简单，如下即可：
Html代码
1. <div style="display:block;margin-bottom:5px;">
2. 菜单控制:
3. 【<a href="#" onclick="tree.openAll();this.blur();return false;" style="color:#333333">展开</a>】
4. 【<a href="#" onclick="tree.closeAll();this.blur();return false;" style="color:#333333">折叠</a>】
5. </div>这样就完整了，我们来看看实际的效果吧：
折叠后的效果就是：
实际中，页面代码不需要每个页面都完整写出，我们可以抽取成宏，直接调用宏即可，下面结合FreeMarker来优化一下编码结构，实际生成的效果都是一样的。
Html代码
1. <#-- 树形控件 tree -->
2. <#macro tree root="" display="">
3. <style type="text/css">@import url('components/dtree/dtree.css');</style>
4. <script type="text/javascript">var dtreeIconBasePath = "components/dtree";</script>
5. <script language="javascript" src="${base}/components/dtree/dtree.js"></script>
6. <#nested>
7. <div style="display:${display};margin-bottom:5px;">菜单控制:【<a href="javascript:void(0)" onclick="tree.openAll();this.blur();return false;" style="color:#333333">展开</a>】【<a href="javascript:void(0)" onclick="tree.closeAll();this.blur();return false;" style="color:#333333">折叠</a>】</div>
8. <div class="dtree">
9. <script type="text/javascript">
10. //建立新树
11. tree = new dTree('tree');
12. tree.config.target = "MainFrame";
13. tree.config.useCookies = false;
14. var selNum = -1;
15. var link = "";
16. //根目录
17. tree.add(0,-1,'${root}', null, null, null, '${base}/images/tico_root.gif', '${base}/images/tico_root.gif');
18. var count = 0;
19. var pLevelIdArray = new Array();
20. pLevelIdArray[1] = 0;
21. var currLevel = 1;
22. for (var i=0; i<treeMenu.length; i++) {
23. item = treeMenu[i];
24. itemitemLevel = item.level;
25. pLevelIdArray[itemLevel+1] = ++count;
26. if (item.link!=null && item.link!="") {
27. if (item.ico!=null) {
28. tree.add(count, pLevelIdArray[itemLevel], item.name, item.link, null, null, item.ico, item.ico);
29. } else {
30. tree.add(count, pLevelIdArray[itemLevel], item.name, item.link);
31. }
32. } else {
33. if (item.ico!=null) {
34. tree.add(count, pLevelIdArray[itemLevel], item.name, null, null, null, item.ico, item.ico);
35. } else {
36. tree.add(count, pLevelIdArray[itemLevel], item.name);
37. }
38. }
39. if (item.select) {
40. selNum = count;
41. link = item.link;
42. }
43. }
44. document.write(tree);
45. tree.openAll();
46. if (selNum != -1) {
47. tree.openTo(selNum,true);
48. .location.href=link;
49. }
50. </script>
51. </div>
52. </#macro> 这是FreeMarker的宏定义。那么在页面如何使用呢，很简单：
Html代码
1. <@p.tree root="管理中心" display="block">
2. <script type="text/javascript">
3. var treeMenu = [
4. { level:1, name:"用户管理"},
5. { level:2, name:"用户列表", ico:"images/tico_way.gif",
6. link:"user_list.html"},
7. { level:2, name:"角色管理"},
8. { level:3, name:"角色列表", ico:"images/tico_way.gif",
9. link:"role_list.html"},
10. { level:3, name:"用户角色", ico:"images/tico_way.gif",
11. link:"ur_list.html"},
12. { level:1, name:"信息管理"},
13. { level:2, name:"新闻管理", ico:"images/tico_way.gif",
14. link:"news_list.html"},
15. { level:2, name:"公告管理", ico:"images/tico_way.gif",
16. link:"bulletin_list.html"},
17. { level:1, name:"系统邮件", ico:"images/tico_way.gif"},
18. { level:1, name:"网络文件", ico:"images/tico_way.gif",
19. link:"disk_list.html"}
20. ];
21. </script>
22. </@p.tree>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
