在做管理系统时不可避免要用到导航树，这种东西只要一次做好，就可以随处运行，目前比较好的组件是dTree，原则上可以达到无限级，当然实际运行中4，5级就已经很多了，dTree的速度还是不错的，而且是JS实现，完全在客户端实现，不占用服务器资源。同时我们可以定制dTree的显示图标，那么我们就来看看怎么制作简单而又完整的导航树。 
    首先是下载dTree组件，本文附件中提供完整的示例，直接使用即可。下面我们先来看看dTree组件的结构： 
 
    这很简单，由一个JS文件，一个样式表文件和提供的基本图标构成，总体20几K，非常小，不占用网络流量。制作dTree的导航树时，也是一个HTML页面，那么我们就要在页面引入相关资源：

  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>

下面就是导航树内容的编写了，做一个很简单很强大的示例：

  1. <script type="text/javascript">
  2. var treeMenu = [
  3. { level:1, name:"用户管理"},
  4. { level:2, name:"用户列表", ico:"images/tico_way.gif",link:"user_list.html"},
  5. { level:2, name:"角色管理"},
  6. { level:3, name:"角色列表", ico:"images/tico_way.gif",link:"role_list.html"},
  7. { level:3, name:"用户角色", ico:"images/tico_way.gif",link:"ur_list.html"},
  8. { level:1, name:"信息管理"},
  9. { level:2, name:"新闻管理", ico:"images/tico_way.gif",link:"news_list.html"},
  10. { level:2, name:"公告管理", ico:"images/tico_way.gif",link:"bulletin_list.html"},
  11. { level:1, name:"系统邮件", ico:"images/tico_way.gif"},
  12. { level:1, name:"网络文件", ico:"images/tico_way.gif",link:"disk_list.html"}
  13. ];
  14. </script>

可以看出level是当前项目的层级，name就是显示的名称，ico是指定的图标，不指定时系统使用默认图标，link就是点击时进入的地址。当然非叶子节点元素一般是不需要地址的，那么不写就可以了，而叶子节点不写的话该行就是不可点击进入的效果。这是一个混合了1，2，3层的导航树。有了这些还不够，它们不能被解析，下面来看看解析的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. tree.add(count, pLevelIdArray[itemLevel], item.name, item.link, 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. tree.add(count, pLevelIdArray[itemLevel], item.name, 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. tree.openTo(selNum,true);
  40. top.document.frames["MainFrame"].location.href=link;
  41. }
  42. </script>

这样就可以了，主要是这里用了frame，页面的显示会在MainFrrame中显示，这是一般管理系统的结构，左侧导航树，右侧主显示区域，上侧是登录信息和模块切换，下侧就是版权声明了。 
    这样就能正常显示一棵树了，但是有时我们需要折叠和展开导航树，这个也很简单，如下即可：

  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来优化一下编码结构，实际生成的效果都是一样的。

  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. var item = treeMenu[i];
  24. var 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. top.document.frames["MainFrame"].location.href=link;
  49. }
  50. </script>
  51. </div>
  52. </#macro>

这是FreeMarker的宏定义。那么在页面如何使用呢，很简单：

  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>

后续我们会结合RBAC模型来介绍一下简单动态权限树的生成。一家之言，仅供参考，希望对使用者有用。

 

用dTree组件生成无限级导航树的更多相关文章

  1. JavaScript导航树

    JS导航树 整理之前的小代码片段,放到博客,便于以后完善查看: 该JS导航树实际效果,[GSP+社区网站专题课程页面导航树]地址:http://gsp.inspur.com/knowledge/zhu ...

  2. Vue视图渲染原理解析，从构建VNode到生成真实节点树

    前言 在 Vue 核心中除了响应式原理外,视图渲染也是重中之重.我们都知道每次更新数据,都会走视图渲染的逻辑,而这当中牵扯的逻辑也是十分繁琐. 本文主要解析的是初始化视图渲染流程,你将会了解到从挂载组 ...

  3. SAP CRM 将组件整合至导航栏中

    到现在,我们已经可以让组件独立地显示.我们只是运行它.让它显示在Web UI中.让我们把组件整合进导航栏,使我们可以在正常登录Web UI时访问它. 步骤一: 为你的UI组件主窗体创建一个内向插件. ...

  4. [WebKit内核] JavaScript引擎深度解析--基础篇（一）字节码生成及语法树的构建详情分析

    [WebKit内核] JavaScript引擎深度解析--基础篇(一)字节码生成及语法树的构建详情分析 标签: webkit内核JavaScriptCore 2015-03-26 23:26 2285 ...

  5. 使用Python从Markdown文档中自动生成标题导航

    概述 知识与思路 代码实现 概述 Markdown 很适合于技术写作,因为技术写作并不需要花哨的排版和内容, 只要内容生动而严谨,文笔朴实而优美. 为了编写对读者更友好的文章,有必要生成文章的标题导航 ...

  6. 隐藏左侧快速导航除DMS导航树之外的其他区域

    <style type="text/css"> /*隐藏左侧快速导航除DMS导航树之外的其他区域*/ .ms-quicklaunchouter { display: n ...

  7. JXL组件生成报告错误（两）

    JXL组件生成报告 1.详细报错例如以下: usage: java org.apache.catalina.startup.Catalina [ -config {pathname} ] [ -non ...

  8. Bootstrap入门（十三）组件7：导航条

    Bootstrap入门(十三)组件7:导航条 1.默认样式的导航条 2.嵌入表单和按钮 3.嵌入文本和非导航的链接 4.组件排列和下拉菜单 5.固定在顶部/底部 6.反色的导航条 7.路径导航 首先先 ...

  9. Bootstrap入门（十二）组件6：导航标签页

    Bootstrap入门(十二)组件6:导航标签页   1.标签页 2.胶囊式标签页 3.垂直展示 4.两端对齐的标签页 5.禁用的链接 6.添加下拉菜单   先引入本地的CSS文件和JS文件(注:1. ...

随机推荐

  1. NetAnalyzer笔记 之 三. 用C++做一个抓包程序

    [创建时间:2015-08-27 22:15:17] NetAnalyzer下载地址 经过前两篇的瞎扯,你是不是已经厌倦了呢,那么这篇让我们来点有意思的吧,什么,用C#.不,这篇我们先来C++的 Wi ...

  2. hdu 4405 Aeroplane chess （概率DP）

    Aeroplane chess Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  3. tomcat下配置https环境

    在网上搜了一下,内容不是非常完好. 现进行整理,做个学习笔记,以备以后使用. (1)进入到jdk下的bin文件夹 (2)输入例如以下指令"keytool -v -genkey -alias ...

  4. 【Nginx】事件和连接

    不同的操作系统相应不同的事件驱动机制.在Linux 2.6之后使用epoll机制.相应的事件驱动模块是ngx_epoll_module.Nginx的ngx_event_core_module模块依据操 ...

  5. OC特有语法-分类（category）

    本文转载Keefo. Objective-C的Object-oriented programming特性提供subclass和category这2个比较非常重要的部分.subclass应该反复被各种编 ...

  6. (转)vivoxshot 精英版三模转五模模式切换操作方法

    https://yunpan.cn/cPUBWc8vtKpID (提取码:de92) 本帖最后由 韩爱峰 于 2016-3-29 23:00 编辑 碰到不少机友在使用过程中操作不成功,现将我的方法跟大 ...

  7. ashx调用session对象

    1.引入命名空间 using System.Web.SessionState 2.必须实现接口 public class Login : IHttpHandler, IRequiresSessionS ...

  8. 二维码生成 - QrCodeNet

    下载QrCodeNet /// <summary> /// 生成QR码 /// </summary> /// <param name="output_path& ...

  9. 14 java 日期处理 joda-time

    http://www.joda.org/joda-time/ 任何企业应用程序都需要处理时间问题.应用程序需要知道当前的时间点和下一个时间点,有时它们还必须计算这两个时间点之间的路径.使用 JDK 完 ...

  10. BestCoder Round #81 (div.2)1001

    Machine Accepts: 580 Submissions: 1890 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65 ...