在做管理系统时不可避免要用到导航树，这种东西只要一次做好，就可以随处运行，目前比较好的组件是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. Zedboard甲诊opencv图像处理（三）

    整个工程进展到这一步也算是不容易吧,但技术含量也不怎么高,中间乱起八糟的错误太烦人了,不管怎么样,现在面临了最大的困难吧,图像处理算法.算法确实不好弄啊,虽然以前整过,但都不是针对图像的. 现在的图像 ...

  2. XMPP通讯开发-服务器好友获取以及监听状态变化

    在 XMPP通讯开发-好友获取界面设计   我们设计了放QQ的列表功能,这里我们获取我们服务器上的 数据. 这一部分知识我们可以查看smack_3_3_0/smack_3_3_0/documentat ...

  3. spring 通过工厂方法配置Bean

    概要: 通过调用静态工厂方法创建Bean 调用静态工厂方法创建Bean是将对象创建的过程封装到静态方法中.当client须要对象时,仅仅须要简单地调用静态方法,而不用关心创建对象地细节. 要声明通过静 ...

  4. Notification (通知)的 新版和旧版用法

    Notification (通知)的 新版和旧版用法   一.先来看旧版,Api 11 之前的用法: NotificationManager manager = (NotificationManage ...

  5. Socket学习笔记

    ..........(此处略去万万字)学习中曲折的过程不介绍了,直接说结果 我的学习方法,问自己三个问题,学习过程将围绕这三个问题进行 what:socket是什么 why:为什么要使用socket ...

  6. Android下按钮的使用方法

    package com.hangsheng.button; import android.app.Activity; import android.os.Bundle; import android. ...

  7. （三）backbone - API学习 - v0.9.2 与 v1.1.2区别

    Backbone.View v0.9.2 中Backbone.View 可以导出对象的options属性, v1.1.2 中去掉该属性,通过如下代码 viewOptions = ['model', ' ...

  8. CODEVS 3279 奶牛的健美操

    3279 奶牛健美操 USACO  时间限制: 2 s  空间限制: 256000 KB  题目等级 : 钻石 Diamond 题目描述 Description Farmer John为了保持奶牛们的 ...

  9. HDU 5044 离线LCA算法

    昨天写了HDU 3966 ,本来这道题是很好解得,结果我想用离线LCA 耍一把,结果发现离线LCA 没理解透,错了好多遍,终得AC ,这题比起 HDU 3966要简单,因为他不用动态查询.但是我还是错 ...

  10. jQuery选择器的学习

    jQuery的核心在于它的选择器,通过观看视频和阅读,发现jQuery选择器大体上的分类可分为这么几种(不同人方式不同,这里选择一个自认为比较好的): 1.基础选择器(对应api文档中的基本选择器和层 ...