在做管理系统时不可避免要用到导航树，这种东西只要一次做好，就可以随处运行，目前比较好的组件是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. AngularJs学习笔记2——四大特性之MVC

    angularJs的四大特性 ①.采用MVC的设计模式 ②.双向数据绑定 ③.依赖注入 ④.模块化设计 现在细说一下MVC的设计模式: MVC: Model(模型)--项目中的数据 View(视图)- ...

  2. Laravel Cheat 表 http://cheats.jesse-obrien.ca/#

    Laravel Cheat Sheet Toggle Code Comments PDF Version Github Laravel 3 Docs Laravel 4 Docs Artisan ph ...

  3. [小技巧] 把虚拟机中的Linux系统安装到U盘中

    出于各种需求,很多用户可能经常会在Windows系统中安装虚拟机,然后在虚拟机中安装Linux系统.使用虚拟机的优点是可以同时使用多个系统,而缺点也是显然的,也就是程序运行效率较差.   而实际上,L ...

  4. DEV SIT UAT

    DEV环境:DEV顾名思义就是develop,即代码开发的环境.SIT环境:System Integration Test系统集成测试,开发人员自己测试流程是否走通.UAT环境:User Accept ...

  5. 关于transform的2D

    在transform的学习中,自己总结了一点经验. 我们知道transform有2D和3D的两大类变换,这里分享下关于2D的属性简单示例: 一.2D变换:  (x为水平,y为垂直) 1.skew(斜拉 ...

  6. FineUI上传控件

    文件上传 现在就简单多了,并且也漂亮多了,参考这个示例. 1: <ext:SimpleForm ID="SimpleForm1" BodyPadding="5px& ...

  7. Java图片工具类，完成图片的截取和任意缩放

    package com.common.util; import java.awt.Graphics2D; import java.awt.Image; import java.awt.Renderin ...

  8. PHP数组foreach后使用current取值的问题

    先看如下的代码 $arr=['a','b','c']; foreach ($arr as $v){ echo $v.'<br>'; } var_dump(current($arr)); 今 ...

  9. Server2008R2:由于没有远程桌面授权服务器可以提供许可证，.....错误的解决 ---设计师零张

    一直使用远程桌面连接一台windows2008server服务器,今天突然报错,连不上了:   “由于没有远程桌面授权服务器可以提供许可证,远程会话被中断.请跟服务器管理员联系.”       由于是 ...

  10. pyopenssl

    https://pyopenssl.readthedocs.org/en/stable/ pyopenssl是一个封装了openssl的python模块. 使用它可以方便地进行一些加解密操作. 1.产 ...