zoukankan      html  css  js  c++  java

  • 用dTree组件生成无限级导航树

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

        下面就是导航树内容的编写了，做一个很简单很强大的示例： 
    Js代码  收藏代码
    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。 
    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中显示，这是一般管理系统的结构，左侧导航树，右侧主显示区域，上侧是登录信息和模块切换，下侧就是版权声明了。 
        这样就能正常显示一棵树了，但是有时我们需要折叠和展开导航树，这个也很简单，如下即可： 
    Html代码  收藏代码
    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来优化一下编码结构，实际生成的效果都是一样的。 
    Html代码  收藏代码
    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的宏定义。那么在页面如何使用呢，很简单： 
    Html代码  收藏代码
    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模型来介绍一下简单动态权限树的生成。一家之言，仅供参考，希望对使用者有用。 

     
  • 相关阅读:
    第5章 JDBC/ODBC服务器
    第4章 SparkSQL数据源
    第3章 SparkSQL解析
    第2章 执行SparkSQL查询
    第1章 Spark SQL概述
    Ubutun重启网卡
    Java面试通关要点汇总整理
    40道Java基础常见面试题及详细答案
    ListView
    数据库表及字段命名规范
  • 原文地址：https://www.cnblogs.com/huangcongcong/p/4754010.html
Copyright © 2011-2022 走看看