在做管理系统时不可避免要用到导航树，这种东西只要一次做好，就可以随处运行，目前比较好的组件是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. 企业生产环境中linux系统分区的几种方案

    方案1:针对网站集群架构中的某个节点服务器分区 该服务器上的数据有多份(其他节点也有)且数据不太重要,建议分区方案如下: /boot: 200MB swap: 物理内存的1.5倍,当内存大于或等于8G ...

  2. (转)iOS7界面设计规范(6) - UI基础 - 模态情境

    继续规范.现在听着Clapton的Wonderful Tonight,想想看,整个高二暑假都在为这首歌着迷,经常夜里一边做英语暑期作业一边循环这首歌,心里特别静的赶脚.13年过去了,再听起来,就像隔着 ...

  3. EBS OAF开发中的Java 实体对象(Entity Object)验证功能补充

    EBS OAF开发中的Java 实体对象(Entity Object)验证功能补充 (版权声明,本人原创或者翻译的文章如需转载,如转载用于个人学习,请注明出处:否则请与本人联系,违者必究) EO理论上 ...

  4. Makefile学习（二）条件判断和内嵌函数

    第七章:Makefile的条件执行 条件语句可是是两个不同的变量.或者变量和常量值的比较: 7.1例子: 对变量“CC”进行判断,其值如果是“gcc ”那么在程序连接时使用库“libgnu.so”或者 ...

  5. VS2010 ReportViewer导出文件下载保存不能识别文件类型

    今天测试项目时,突然发现导出报表下载保存的保存,不能识别文件的类型,文件名称为:.xls[3] 检查代码发现在指定报表路径时多了一个方法: ReportViewer1.LocalReport.Load ...

  6. Geodatabase - 创建要素类.

    在NET中,会遇到以“_2”结尾的属性,这些属性是可写的. 以下代码在已有工作空间下,创建一个新的点要素类: //例如,personalDBPath=@"G:\doc\gis\1.400\d ...

  7. ios面试汇总

    http://www.360doc.com/content/15/0707/01/26281448_483232245.shtml

  8. UIView设置少于四个的圆角

    最近的需求中有个label需要设置右下角为圆角,其余三个为直角,一开始用的是重写drawRect,然后用绘图重绘每个角的样子,计算起来还是麻烦 后来发现了下面的方法: UILabel *courseS ...

  9. 一行代码设置UITableView分割线的长度

    使用UITableView时会发现分割线的长度是这样的: 而QQ里面分割线左端到昵称的下面就截止了: 只需行代码就可以搞定: self.tableView.separatorInset = UIEdg ...

  10. web qq 获取好友列表hash算法

    web qq 获取好友列表hash算法 在使用web qq的接口进行好友列表获取的时候,需要post一个参数:hash 在对其js文件进行分析之后,发现计算hash的函数位于: http://0.we ...