Tree图全功略

发表于:2007-06-22来源:作者:点击数: 标签:
Tree型结构,Tree图不管在哪个领域都是一个比较吃香的东东。在自己的网站或项目中有一个tree型图或tree型结构的权限(或角色,和 数据库 设计相关),总能有那么一点点成就感。^_^ 这篇文章就把我自己在这方面应用的实践整理一下拿出来。为您详细介绍了在Tre

   
  Tree型结构,Tree图不管在哪个领域都是一个比较吃香的东东。在自己的网站或项目中有一个tree型图或tree型结构的权限(或角色,和数据库设计相关),总能有那么一点点成就感。^_^

     这篇文章就把我自己在这方面应用的实践整理一下拿出来。为您详细介绍了在Tree有关方面应用的完整实践。

   实例如下:

  

Tree图全功略

   左边的tree图的实现方式是通过javascript+jsp实现。如果是为了实现逻辑上的tree结构的维护,采用的是xml解决方案

   现在这里说一下,javascript+jsp的表现层的实现。这里的javascript并不是唯一的选择,可以在网上下到类似的javascript(毕竟是共享的嘛。:) ).点这里可以下载相关代码.

   其中的test.htm是javascript例子代码:

  

  

   

  

   "d.add(3,0,'技术与方案','admin.php?module=article&action=catelist&cid=3','','_blank');

   "中的"3"是当前节点,"0"是父节点,"技术与方案"是tree上显示的节点名,"admin.php?......"指向的url."_blank"是指向的窗口。

   从上可以看出,这个javascript已经把tree图实现的大部分工作已经做好了。只要我们传入对应的数据就可以了。

   首先是数据库结构。从上可以看出,有节点名,节点id,父节点id,节点url,节点target,还可以有个节点状态(比如是激活或休眠,很常用用一种用法),当然还可以有其它属性,那就要根据项目的需要了。其实只要抓住一点,有唯一节点id和唯一父节点id就可以了(面向对象)就可以了。

   有了数据库结构,然后要实现tree图就是根据一定的限制(比如权限,最后对应为tree结构的子集(当然也必须是完整的tree结构))取出符合条件并且完整的tree结构的数据(我采用的解决方法是把权限对应的节点的上溯父节点都取出来保证tree结构的完整性,具体可以看java&xml心得(三)).

   假设我们已经完成了上述的工作,那么要实现tree图的代码应该如下:

   .........

  

  

   Untitled document.lt;/title><P>   <meta http-equiv="Content-Type" content="text/html; charset=gb2312"><P>   <link rel="stylesheet" href="images/cj_styles.css" type="text/css"><P>   <P>   </head><P>   <P>   <body bgcolor="#FFFFFF" text="#000000" leftmargin="2" topmargin="0"><P>   <div class="dtree"><P>   <P>   <P>   <P>   </div><P>   <P>   </body><P>   </html><P>   这样就实现了动态tree图。<P>   上面的这种实现是用jsp+javascript实现。也可以用xml+xsl来实现。不是必要,只是可以让新手也了解一下关于xml的应用。:)<P>   比如我们已经成功把数据库的数据导出成xml格式。代码如下:<P>   <?xml version="1.0" ?><P>   <?xml:stylesheet type="text/xsl" href="ttx2.xsl" ?><P>   <table name="cm_tree"><P>   <col id="1" label="闆嗗洟鏂伴椈" parentid="29" target="_blank" url="/zdtadmin/default.jsp"></col><P>   <col id="2" label="闆嗗洟瑕侀椈" parentid="1" target="_blank" url="/zdtadmin/newsadmin/list.jsp?tree_id=2"></col><P>   <col id="3" label="缁煎悎淇℃伅" parentid="1" target="_blank" url="/zdtadmin/newsadmin/list.jsp?tree_id=3"></col><P>   <col id="4" label="鏀跨瓥娉曡?" parentid="29" target="_blank" url="/zdtadmin/default.jsp"></col><P>   <col id="5" label="娉曞緥娉曡?" parentid="4" target="_blank" url="/zdtadmin/newsadmin/list.jsp?tree_id=5"></col><P>   <col id="7" label="鏀跨瓥鐮旂┒" parentid="4" target="_blank" url="/zdtadmin/newsadmin/list.jsp?tree_id=7"></col><P>   <col id="8" label="鐢熶骇缁忚惀" parentid="29" target="_blank" url="/zdtadmin/default.jsp"></col><P>   <col id="9" label="瀹夊叏鐢熶骇" parentid="8" target="_blank" url="/zdtadmin/newsadmin/list.jsp?tree_id=9"></col><P>   <col id="10" label="缁忚惀鍔ㄦ <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6352523081585038" crossorigin="anonymous"></script> <p style="font-weight:bold; background-color:#F3F3F3; border:1px solid #DBDBDB; padding:5px; border-radius:5px">原文转自:<a target="_blank" rel="external nofollow">http://www.ltesting.net</a></p> <div class="lt_sec_fenxiang"> <div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a title="分享到新浪微博" href="#" class="bds_tsina" data-cmd="tsina"></a><a title="分享到微信" href="#" class="bds_weixin" data-cmd="weixin"></a><a title="分享到QQ空间" href="#" class="bds_qzone" data-cmd="qzone"></a></div> <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"1","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"32"},"share":{},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["tsina","tqq","weixin","qzone"]}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)]; </script> </div> <div class="lt_fenye"> <ul class="pagination"> </ul> </div> <div class="ltad_760"> <script type="text/javascript"> /*文章内容页_底部广告_760x90*/ var cpro_id = "u1553971"; </script> <script src="http://cpro.baidustatic.com/cpro/ui/c.js" type="text/javascript"></script> </div> </div> </div> </div> <div class="col-md-3"> <div class="lt_panel"> <div class="lt_panel_head"> <h3> <a href="" class="lt_panel_title">相关文章</a></h3> </div> <div class="lt_panel_body"> <ul> <li> <h5><a target="_blank" href="/ceshi/ruanjianceshikaifajishu/rjcskfyy/java/2014/0530/207319.html" title="让Java的反射更得简单">让Java的反射更得简单</a></h5> </li> <li class="divider"></li> <li> <h5><a target="_blank" href="/ceshi/ruanjianceshikaifajishu/rjcskfyy/java/2014/0527/207314.html" title="如何写出更好的Java代码">如何写出更好的Java代码</a></h5> </li> <li class="divider"></li> <li> <h5><a target="_blank" href="/ceshi/ruanjianceshikaifajishu/rjcskfyy/java/2013/1028/206750.html" title="用来理解 Java 编程语言的 8 个图表">用来理解 Java 编程语言的 8 个图表</a></h5> </li> <li class="divider"></li> <li> <h5><a target="_blank" href="/ceshi/ruanjianceshikaifajishu/rjcskfyy/java/2013/0809/206562.html" title="maven环境快速搭建">maven环境快速搭建</a></h5> </li> <li class="divider"></li> <li> <h5><a target="_blank" href="/ceshi/ruanjianceshikaifajishu/rjcskfyy/java/2013/0809/206561.html" title="配置JDK环境">配置JDK环境</a></h5> </li> <li class="divider"></li> <li> <h5><a target="_blank" href="/ceshi/ruanjianceshikaifajishu/rjcskfyy/java/2013/0531/206325.html" title="Java简单游戏开发之碰撞检测">Java简单游戏开发之碰撞检测</a></h5> </li> <li class="divider"></li> </ul> </div> <div class="img-thumbnail"> <div class="row"> <div class="ltad_270" ><div class="_yyf2re3yyq"></div> <script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u136320", container: "_yyf2re3yyq", async: true }); </script> <!-- 多条广告如下脚本只需引入一次 --> <script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js" async="async" defer="defer" > </script></div> </div> </div> <ul class="nav nav-pills nav-justified panel panel-default ltdiv_index_1_list" style="margin-top:20px; margin-bottom:0px;"> <li class="active"><a href="#v3_tabs_zhou" data-toggle="tab">周排行</a></li> <li><a href="#v3_tabs_yue" data-toggle="tab">月排行</a></li> <li><a href="#v3_tabs_down" data-toggle="tab">下载</a></li> <div class="tab-content" style="padding:10px 10px 20px 10px"> <div class="tab-pane fade in active" id="v3_tabs_zhou"> <ul class="ltdiv1_list_blue"> <li> <h5> <a target="_blank" title="<font color='#FF6633'>全网最详细的接口测试实战</font>" href="/ceshi/ceshijishu/csgl/jccs/2023/0701/208790.html"><font color='#FF6633'>全网最详细的接口测试实战</font></a> </h5> </li> <li> <h5> <a target="_blank" title="先测试再开发?TDD测试驱动" href="/ceshi/ceshijishu/dycs/dycsff/2023/0701/208794.html">先测试再开发?TDD测试驱动</a> </h5> </li> <li> <h5> <a target="_blank" title="自动化测试架构" href="/ceshi/ceshijishu/zdcs/zdcskj/2023/0701/208787.html">自动化测试架构</a> </h5> </li> <li> <h5> <a target="_blank" title="<font color='#FF6633'>软件测试架构师的知识能力</font>" href="/ceshi/ceshijishu/csgl/2023/0701/208788.html"><font color='#FF6633'>软件测试架构师的知识能力</font></a> </h5> </li> <li> <h5> <a target="_blank" title="大数据平台测试方法" href="/ceshi/ceshijishu/yunceshi/2023/0701/208791.html">大数据平台测试方法</a> </h5> </li> <li> <h5> <a target="_blank" title="用不同的测试模型来构建测" href="/ceshi/ceshijishu/dycs/dycsff/2023/0701/208789.html">用不同的测试模型来构建测</a> </h5> </li> <li> <h5> <a target="_blank" title="<font color='#FF6633'>当软件测试遇上ChatGPT:软件</font>" href="/ceshi/ceshijishu/csgl/2023/0701/208793.html"><font color='#FF6633'>当软件测试遇上ChatGPT:软件</font></a> </h5> </li> </ul> </div> <div class="tab-pane fade" id="v3_tabs_yue"> <ul class="ltdiv1_list_green"> <li> <h5> <a target="_blank" title="<font color='#FF6633'>全网最详细的接口测试实战</font>" href="/ceshi/ceshijishu/csgl/jccs/2023/0701/208790.html"><font color='#FF6633'>全网最详细的接口测试实战</font></a> </h5> </li> <li> <h5> <a target="_blank" title="先测试再开发?TDD测试驱动" href="/ceshi/ceshijishu/dycs/dycsff/2023/0701/208794.html">先测试再开发?TDD测试驱动</a> </h5> </li> <li> <h5> <a target="_blank" title="自动化测试架构" href="/ceshi/ceshijishu/zdcs/zdcskj/2023/0701/208787.html">自动化测试架构</a> </h5> </li> <li> <h5> <a target="_blank" title="<font color='#FF6633'>软件测试架构师的知识能力</font>" href="/ceshi/ceshijishu/csgl/2023/0701/208788.html"><font color='#FF6633'>软件测试架构师的知识能力</font></a> </h5> </li> <li> <h5> <a target="_blank" title="大数据平台测试方法" href="/ceshi/ceshijishu/yunceshi/2023/0701/208791.html">大数据平台测试方法</a> </h5> </li> <li> <h5> <a target="_blank" title="用不同的测试模型来构建测" href="/ceshi/ceshijishu/dycs/dycsff/2023/0701/208789.html">用不同的测试模型来构建测</a> </h5> </li> <li> <h5> <a target="_blank" title="<font color='#FF6633'>当软件测试遇上ChatGPT:软件</font>" href="/ceshi/ceshijishu/csgl/2023/0701/208793.html"><font color='#FF6633'>当软件测试遇上ChatGPT:软件</font></a> </h5> </li> </ul> </div> <div class="tab-pane fade" id="v3_tabs_down"> <ul class="ltdiv1_list_red"> <li> <h5> <a target="_blank" title="MBT基于模型的测试介绍资料" href="/ceshi/down/ruanjianceshiziliaoku/rjzlbz/zlkj/2017/0822/208468.html" >MBT基于模型的测试介绍资料</a> </h5> </li> <li> <h5> <a target="_blank" title="iso29119相关介绍性资料" href="/ceshi/down/ruanjianceshiziliaoku/rjzlbz/zlkj/2017/0822/208467.html" >iso29119相关介绍性资料</a> </h5> </li> <li> <h5> <a target="_blank" title="HP QTP 10 中文版官方中文补丁" href="/ceshi/down/shangyeruanjianceshigongju/mercury/gncs/2011/1230/203852.html" >HP QTP 10 中文版官方中文补丁</a> </h5> </li> <li> <h5> <a target="_blank" title="HP QTP 10 英文版 下载地址" href="/ceshi/down/shangyeruanjianceshigongju/mercury/gncs/2011/1230/203851.html" >HP QTP 10 英文版 下载地址</a> </h5> </li> <li> <h5> <a target="_blank" title="HP ALM 11 官方 中文版下载地址" href="/ceshi/down/shangyeruanjianceshigongju/mercury/csgl/2011/1212/203744.html" >HP ALM 11 官方 中文版下载地址</a> </h5> </li> <li> <h5> <a target="_blank" title="Quality Center 9.0中文版 下载地" href="/ceshi/down/shangyeruanjianceshigongju/mercury/csgl/2011/1209/203742.html" >Quality Center 9.0中文版 下载地</a> </h5> </li> <li> <h5> <a target="_blank" title="HttpWatch Basic Edition Version 7." href="/ceshi/down/ruanjianceshifuzhugongju/2011/1028/203418.html" >HttpWatch Basic Edition Version 7.</a> </h5> </li> <li> <h5> <a target="_blank" title="WIN2003+ORACLE11G+QC11(ALM11) 安装" href="/ceshi/down/ruanjianceshiziliaoku/rjcsgjjc/qualityc/2011/0914/203213.html" >WIN2003+ORACLE11G+QC11(ALM11) 安装</a> </h5> </li> <li> <h5> <a target="_blank" title="WIN2003+SQL2005(SP3)+QC11(ALM11) 安" href="/ceshi/down/ruanjianceshiziliaoku/rjcsgjjc/qualityc/2011/0913/203212.html" >WIN2003+SQL2005(SP3)+QC11(ALM11) 安</a> </h5> </li> </ul> </div> </div> </ul> </div> <div class="lt_panel"> <div class="lt_panel_head"> <h3> <a href="" class="lt_panel_title">软件测试沙龙</a> <a href="" class="lt_panel_right">More>></a> </h3> </div> <div class="lt_panel_body" style="padding-top:8px;"> <script src='/plus/ad_js.php?aid=89' language='javascript'></script> <script src='/plus/ad_js.php?aid=88' language='javascript'></script> <script src='/plus/ad_js.php?aid=87' language='javascript'></script> </div> </div> <div class="lt_panel"> <div class="lt_panel_head"> <h3> <a href="" class="lt_panel_title">新浪微博</a><a href="https://weibo.com/lingceguoji/" class="lt_panel_right">More>></a></h3> </div> <div class="lt_panel_body"> <iframe width="100%" height="420" class="share_self" frameborder="0" scrolling="no" src="https://widget.weibo.com/weiboshow/index.php?language=&width=0&height=450&fansRow=2&ptype=1&speed=0&skin=9&isTitle=0&noborder=0&isWeibo=1&isFans=0&uid=2190735247&verifier=72498178&dpc=1"></iframe> </div> </div> <a href="http://list.qq.com/cgi-bin/qf_invite?id=d65cee510a8ba9ca33d848537766a9aaef05a7b11e8544ef" title="邮件订阅"><img src="/images/gagd/2014/05/big_youjiandingyue.png" alt="..." width="270" height="124" class="img-thumbnail"></a> <div class="lt_panel_head"> <h3> <a href="" class="lt_panel_title">热门标签</a> </h3> </div> <div class="lt_panel_body"> <ul class="lt_sec_list_top" style="height:120px"> <li><a href="/ceshi/ceshijishu/gncs/">功能测试</a></li> <li><a href="/ceshi/ceshijishu/xncs/">性能测试</a></li> <li><a href="/ceshi/ceshijishu/aqcs/">安全测试</a></li> <li><a href="/ceshi/ceshijishu/bdhcs/">本地化测试</a></li> <li><a href="/ceshi/ceshijishu/yxcs/">游戏测试</a></li> <li><a href="/ceshi/ceshijishu/webcs/">web测试</a></li> <li><a href="/ceshi/ceshijishu/dycs/">单元测试</a></li> <li><a href="/ceshi/ceshijishu/mjcs/">敏捷测试</a></li> <li><a href="/ceshi/ceshijishu/csyl/">测试用例</a></li> <li><a href="/ceshi/ceshijishu/csmb/">测试模版</a></li> <li><a href="/ceshi/ceshijishu/csgl/">测试管理</a></li> <li><a href="/ceshi/ceshijishu/csgj/">测试工具</a></li> </ul> <div class="lt_dec_weixin"> <script src='/plus/ad_js.php?aid=103' language='javascript'></script> <ul> <li><a title="新浪微博" href="https://weibo.com/lingceguoji/"><img src="/images/icon/icons_sinaweibo.png"></a></li> <li style="margin-right:0"><a title="RSS订阅" href="/rss.xml"><img src="/images/icon/icons_rss.png"></a></li> </ul> </div> </div> </div> </div> <div class="row"> <div class="footer" style="text-align:center"> <div id="bottom_link"><a rel="external nofollow" href="/about/aboutus.html" target="_blank">关于领测软件测试网</a> | <a href="/about/zhaopin.html" rel="external nofollow" target="_blank">诚聘英才</a> | <a rel="external nofollow" href="/about/adserver.html" target="_blank">广告服务</a> | <a href="/about/tougao.html" rel="external nofollow" target="_blank">投稿指南</a> | <a rel="external nofollow" href="/about/contactus.html" target="_blank">联系我们</a> | <a href="/about/map.html" target="_blank">网站地图</a>| <a rel="external nofollow" href="/about/links.html" target="_blank">友情链接</a><br /> 版权所有(C) 2003-2021 Ltesting(<a href="http://www.ltesting.net/" target="_blank">领测软件测试网</a>)|<a href="http://www.ltesting.com.cn/" target="_blank">领测国际科技(北京)有限公司</a> |<a href="http://www.ltesting.net/" target="_blank">软件测试网</a> All Rights Reserved<br /> <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备10010545号-5</a> | 京公网安备11010602004416号-1<br /> 技术支持和业务联系:info@ltesting.com.cn 电话:010-51297073<br /> <BR> <script type="text/javascript"> //initiating jQuery jQuery(function($) { $(document).ready( function() { //enabling stickUp on the '.navbar-wrapper' class $('.yidongnav').stickUp({ //enabling marginTop with the 'auto' setting marginTop: 'auto' }); }); }); $(function() { $('.banner').unslider( {speed: 800, delay: 6000, complete: function() {}, keys: true, dots: true, fluid: false } ); }); </script> <!--网站统计代码开始--> <!-- Google tag (gtag.js) --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-TF24PCFVLE"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-TF24PCFVLE'); </script> <script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script> <script>LA.init({id:"20OY1Li5zIFeSFLo",ck:"20OY1Li5zIFeSFLo"})</script> <script type="text/javascript"> var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://"); document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F207c370227bbf98ebb229202aa7f0481' type='text/javascript'%3E%3C/script%3E")); </script> <!--网站统计代码结束--> </div> </div> </div> </div> </div> </body> </html>