在做管理系统时不可避免要用到导航树，这种东西只要一次做好，就可以随处运行，目前比较好的组件是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. （转载）iOS Framework: Introducing MKNetworkKit

    This article is available in Serbo-Croatian,  Japanese and German. (Translations in Serbo-Croatian b ...

  2. (转)Android中截取当前屏幕图片

    该篇文章是说明在Android手机或平板电脑中如何实现截取当前屏幕的功能,并把截取的屏幕保存到SDCard中的某个目录文件夹下面.实现的代码如下: /** * 获取和保存当前屏幕的截图 */ priv ...

  3. Android Dependencies小差号引起的问题

    问题是由于Android Dependencies小差号引起的,下午一搞Android的哥们在群里说最近导入的几个工程每个都是Android Dependencies报错,小差号,我先说解决方法: 方 ...

  4. mysqldump备份原理

    现网中数据库运维时,要经常对数据库做热备.为保证恢复时数据的完整性与一致性, 一种方法是在备份之前锁表,但锁表会影响正在运行的业务. mysqldump是当前MySQL中最常用的备份工具,通过mysq ...

  5. jquery选择指定元素之外的所有元素

    最近的项目中有这么一个需求,点击一排图片中的任意一张后底部弹出一个对话框,要求点击任意地方隐藏对话框 这个时候用not()显然是不现实的,用closest()可以实现差不多的功能 <!DOCTY ...

  6. c语言构建动态数组

    #include <stdio.h> #include <stdlib.h> int main(void) { int len; int * arr; printf(" ...

  7. oracle 存储过程返回结果集 （转载）

    好久没上来了, 难道今天工作时间稍有空闲, 研究了一下oracle存储过程返回结果集. 配合oracle临时表, 使用存储过程来返回结果集的数据读取方式可以解决海量数据表与其他表的连接问题. 在存储过 ...

  8. oracle 随Linux系统启动自启动设置

    本文转自http://www.jb51.net/article/19823.htm 首先,要在RHEL中设置允许ORACLE系统自动启动,因为默认情况下是设置为不允许的.操作如下: 在root账户下修 ...

  9. C#重写Equals方法步骤

    检查传入的参数是否为null, 如果为null,那么返回false, 否则执行步骤2 调用ReferenceEquals查看是否为统一个对象,如果是,那么返回true, 否则执行步骤3 判断两者是否为 ...

  10. linux install zh_CN(ubuntu)

    cd /usr/share/locales sudo ./install-language-pack zh_CN