首页 > 学院 > 开发设计 > 正文

Tree图全功略

2019-11-18 13:19:04
字体:
来源:转载
供稿:网友

  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>   <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><br><br></SPAN> </div> </div> <div class=page1> <p align="center" class="pageLink"></p> </div> <div class="fenxiang"> <!--分享 --> <div style="text-align:left">上一篇:<a href='/wen/2019/11-19/221177.html'>Sun用AppServer 8.0反击对手</a></div> <br> <div style="text-align:left">下一篇:<a href='/wen/2019/11-19/221179.html'>关掉那可恶的Dos窗口</a></div> <br> <script src=/d/js/acmsd/gao21.js></script> <!--分享 --> </div> <div class="pinglun"> <!-- 评论 --> <script> function CheckPl(obj) { if(obj.saytext.value=="") { alert("您没什么话要说吗?"); obj.saytext.focus(); return false; } return true; } </script><form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)"> <table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost"> <tr> <td><table width="100%" border="0" cellpadding="0" cellspacing="0" class="title"> <tr> <td><strong>发表评论</strong></td> <td align="right"><a href="/e/pl/?classid=93&id=221178">共有<span><script type="text/javascript" src="/e/public/ViewClick/?classid=93&id=221178&down=2"></script></span>条评论</a></td> </tr> </table> <table width="100%" border="0" cellspacing="10" cellpadding="0"> <tr> <td><table width="100%" border="0" cellpadding="0" cellspacing="2"> <tr> <td width="56%" align="left">用户名: <input name="username" type="text" class="inputText" id="username" value="" size="16" /></td> <td width="44%" align="left">密码: <input name="password" type="password" class="inputText" id="password" value="" size="16" /></td> </tr> <tr> <td align="left">验证码: <input name="key" type="text" class="inputText" size="10" /> <img src="/e/ShowKey/?v=pl" align="absmiddle" /> </td> <td align="left"><input name="nomember" type="checkbox" id="nomember" value="1" checked="checked" /> 匿名发表</td> </tr> </table> <textarea name="saytext" cols="70" rows="6" id="saytext"></textarea><input name="imageField" type="image" src="/e/data/images/postpl.gif"/> <input name="id" type="hidden" id="id" value="221178" /> <input name="classid" type="hidden" id="classid" value="93" /> <input name="enews" type="hidden" id="enews" value="AddPl" /> <input name="repid" type="hidden" id="repid" value="0" /> <input type="hidden" name="ecmsfrom" value="/wen/2019/11-19/221178.html"></td> </tr> </table> </td> </tr> </table></form> <!-- 评论 --> </div> <div class="mygt"> <div class="mygt_title"> <div class="tcleft"><B>学习交流</B></div> <div class="tcright"><a href="/ge/115/" target="_blank">更多</a></div> </div> <div class="mygt_left"> <ul> <!----> <li><a href="/wen/2019/10-28/48011.html" target="_blank"><img src="/d/file/p/2019/10-28/b7a3d29b95568c990e96a4467f691f53.jpg"></a><p> <a href="/wen/2019/10-28/48011.html" target="_blank">索泰发布一款GTX 1070 Mini迷</a></p></li> <!----> <li><a href="/wen/2019/10-28/48009.html" target="_blank"><img src="/d/file/p/2019/10-28/1b9b7f6eadc84f5a10ec4fc3d1f9ca3d.jpg"></a><p> <a href="/wen/2019/10-28/48009.html" target="_blank">AMD新旗舰显卡轻松干翻NVIDIA </a></p></li> <!----> </ul> </div> <div class="mygt_right"> <div class="mygt_bt"> <!----> <p><b><a href="/wen/2019/10-28/48011.html" target="_blank">索泰发布一款GTX 1070 Mini迷你版本:小机</a></b></p> <span><a href="/wen/2019/10-28/48011.html" target="_blank">索泰发布一款GTX 1070 Mini迷你版本:小机箱大爱...</a></span> <!----> </div> <div class="mygt_xt"></div> <ul> <!----> <li><a href="/wen/2019/09-10/1721.html" target="_blank">usb无线网卡怎么用,小编告诉你安装教程</a><span>09-10</span></li> <!----> <li><a href="/wen/2019/09-10/1718.html" target="_blank">usb调试在哪,小编告诉你usb调试在哪</a><span>09-10</span></li> <!----> <li><a href="/wen/2019/09-10/1719.html" target="_blank">优盘不显示,小编告诉你优盘不显示怎么办</a><span>09-10</span></li> <!----> <li><a href="/wen/2019/09-10/1716.html" target="_blank">低级格式化,小编告诉你硬盘怎么低级格式化</a><span>09-10</span></li> <!----> </ul> <ul> <!----> <li><a href="/wen/2019/09-08/1374.html" target="_blank">帝国cms分类信息的所在地在的修改</a><span>09-08</span></li> <!----> <li><a href="/wen/2019/09-08/1371.html" target="_blank">将网站地图和友情链接table样式改为div+css</a><span>09-08</span></li> <!----> <li><a href="/wen/2019/09-08/1372.html" target="_blank">用帝国cms实现不规则新闻或信息调用(应大站</a><span>09-08</span></li> <!----> <li><a href="/wen/2019/09-08/1369.html" target="_blank">帝国调用DZ论坛精华帖</a><span>09-08</span></li> <!----> <li><a href="/wen/2019/09-08/1370.html" target="_blank">用灵动标签调用discuz和phpwind的最新贴子</a><span>09-08</span></li> <!----> </ul> </div> </div> <script src=/d/js/acmsd/gao22.js></script> <div class="pic"> <div class="mygt_title"> <div class="tcleft"><B>热门图片</B></div> <div class="tcright"><a href="/ge/151/" target="_blank">更多</a></div> </div> <ul> <!----> <li><a href="/wen/2019/09-13/2601.html" target="_blank"><img src="/d/file/p/2019/09-13/5513d58eaea5dc8f505cee6cd2ca3406.jpg"></a><p> <a href="/wen/2019/09-13/2601.html" target="_blank">芭蕾舞蹈表演,真实美到极致</a></p></li> <!----> <li><a href="/wen/2019/09-13/2600.html" target="_blank"><img src="/d/file/p/2019/09-13/96c155b818a9d8896682994f06e96374.jpg"></a><p> <a href="/wen/2019/09-13/2600.html" target="_blank">下午茶时间,悠然自得的休憩</a></p></li> <!----> <!----> <li style="margin-right:0px;"><a href="/wen/2019/09-15/2611.html" target="_blank"><img src="/d/file/p/2019/09-15/cf9b9166a23c30f03d2cb3c3c46344a0.jpg"></a><p> <a href="/wen/2019/09-15/2611.html" target="_blank">充斥这繁华奢靡气息的城市迪拜风景图片</a></p></li> <!----> <li style="margin-right:0px;"><a href="/wen/2019/09-15/2610.html" target="_blank"><img src="/d/file/p/2019/09-15/b7e5582f0db5c3d379a81ea55ad43c0f.jpg"></a><p> <a href="/wen/2019/09-15/2610.html" target="_blank">从山间到田野再到大海美丽的自然风景图片</a></p></li> <!----> <!----> <li><a href="/wen/2019/09-16/2621.html" target="_blank"><img src="/d/file/p/2019/09-16/1f46d1c479a54a8333794039c5b0cbf2.jpg"></a><p> <a href="/wen/2019/09-16/2621.html" target="_blank">肉食主义者的最爱美食烤肉图片</a></p></li> <!----> <li><a href="/wen/2019/09-16/2620.html" target="_blank"><img src="/d/file/p/2019/09-16/353e4f9d66694b7652859d454ee26466.jpg"></a><p> <a href="/wen/2019/09-16/2620.html" target="_blank">夏日甜心草莓美食图片</a></p></li> <!----> <!----> <li style="margin-right:0px;"><a href="/wen/2019/09-17/2631.html" target="_blank"><img src="/d/file/p/2019/09-17/109deb9c688e62ab7ec5b71420d1b308.jpg"></a><p> <a href="/wen/2019/09-17/2631.html" target="_blank">人逢知己千杯少,喝酒搞笑图集</a></p></li> <!----> <li style="margin-right:0px;"><a href="/wen/2019/09-17/2630.html" target="_blank"><img src="/d/file/p/2019/09-17/b8e3fc604e37276489853fcc548e6d5f.jpg"></a><p> <a href="/wen/2019/09-17/2630.html" target="_blank">搞笑试卷,学生恶搞答题</a></p></li> <!----> <div style="clear:both"></div> </ul> </div> <script src=/d/js/acmsd/gao23.js></script> <div class="ph"> <div class="ph_left"> <div class="ph_title"><b>猜你喜欢的新闻</b></div> <ul> <!----> <li><a href="/wen/2019/10-23/19519.html" target="_blank">荣耀总裁赵明乌镇演讲:荣耀首款5G手机V30下</a></li> <!----> <li><a href="/wen/2019/10-21/13223.html" target="_blank">搜狐张朝阳:回归媒体是搜狐重新崛起的关键</a></li> <!----> <li><a href="/wen/2019/10-21/13221.html" target="_blank">华为轮值董事长郭平:虚拟技术创造现实价值</a></li> <!----> <li><a href="/wen/2019/10-20/7876.html" target="_blank">第六届世界互联网大会开幕“to B”端成热门</a></li> <!----> <li><a href="/wen/2019/09-26/2661.html" target="_blank">滴滴英文服务上线两周年 用户已超200万</a></li> <!----> <li><a href="/wen/2019/09-25/2658.html" target="_blank">华为推出全球至快AI训练集群Atlas900</a></li> <!----> <li><a href="/wen/2019/09-25/2654.html" target="_blank">马斯克:特斯拉正组建中国技术团队</a></li> <!----> <li><a href="/wen/2019/09-25/2653.html" target="_blank">10年后6G将问世 速度有望比5G快100倍</a></li> <!----> <li><a href="/wen/2019/09-24/2651.html" target="_blank">WeworkCEO称已开始考虑未来职位 不排除放弃</a></li> <!----> <li><a href="/wen/2019/09-24/2649.html" target="_blank">谷歌软件商店模式变革:推出5美元会员 可用数</a></li> <!----> </ul> </div> <div class="ph_left"> <div class="ph_title"><b>猜你喜欢的关注</b></div> <ul> <!----> <li><a href="/wen/2019/11-19/233792.html" target="_blank">聊天室实现私聊(一)</a></li> <!----> <li><a href="/wen/2019/11-19/233791.html" target="_blank">聊天室实现私聊(二)</a></li> <!----> <li><a href="/wen/2019/11-19/233790.html" target="_blank">聊天室实现私聊(三)</a></li> <!----> <li><a href="/wen/2019/11-19/233789.html" target="_blank">聊天室实现私聊(四)</a></li> <!----> <li><a href="/wen/2019/11-19/233788.html" target="_blank">网页在线人数统计的做法</a></li> <!----> <li><a href="/wen/2019/11-19/233786.html" target="_blank">ADO存取数据时如何实现留言记录的分页显示</a></li> <!----> <li><a href="/wen/2019/11-19/233783.html" target="_blank">一个简单聊天室的建立.(供学习参考)</a></li> <!----> <li><a href="/wen/2019/11-19/233781.html" target="_blank">构建你的网站新闻自动发布系统之一</a></li> <!----> <li><a href="/wen/2019/11-19/233780.html" target="_blank">构建你的网站新闻自动发布系统之二</a></li> <!----> <li><a href="/wen/2019/11-19/233779.html" target="_blank">构建你的网站新闻自动发布系统之三</a></li> <!----> </ul> </div> </div> </div> <div class="content1_right"> <div class="right_ad1"> <!--广告 --> <script src=/d/js/acmsd/gao24.js></script> <!--广告 --> </div> <div class="right_001"> <div class="title2"> <p class="p1">新闻热点</p> </div> <!-- --> <div class="xwt2"> <div class="xwt2_left"><a href="/wen/2019/10-23/19519.html" target="_blank"><img src="/d/file/p/2019/10-23/99160f437eb299e5cff07b6cb0b1c242.jpg"></a></div> <div class="xwt2_right"> <div class="xwt2_right_a"><a href="/wen/2019/10-23/19519.html" target="_blank">荣耀总裁赵明乌镇演讲:荣耀首款5G手机V30下月发布</a></div> <div class="xwt2_right_b">2019-10-23 09:17:05</div> </div> </div> <!-- --> <div class="xwt2"> <div class="xwt2_left"><a href="/wen/2019/10-21/13223.html" target="_blank"><img src="/d/file/p/2019/10-21/67e0b89a1dd84f549e662c06d1146441.jpg"></a></div> <div class="xwt2_right"> <div class="xwt2_right_a"><a href="/wen/2019/10-21/13223.html" target="_blank">搜狐张朝阳:回归媒体是搜狐重新崛起的关键</a></div> <div class="xwt2_right_b">2019-10-21 09:20:02</div> </div> </div> <!-- --> <div class="xwt2"> <div class="xwt2_left"><a href="/wen/2019/10-21/13221.html" target="_blank"><img src="/d/file/p/2019/10-21/e7e37f78e84c1963f9f4b6452035e8ac.jpg"></a></div> <div class="xwt2_right"> <div class="xwt2_right_a"><a href="/wen/2019/10-21/13221.html" target="_blank">华为轮值董事长郭平:虚拟技术创造现实价值</a></div> <div class="xwt2_right_b">2019-10-21 09:00:12</div> </div> </div> <!-- --> <div class="xwt2"> <div class="xwt2_left"><a href="/wen/2019/09-26/2661.html" target="_blank"><img src="/d/file/p/2019/09-26/dc5990bec2e3124023236ad81cf7faf1.jpg"></a></div> <div class="xwt2_right"> <div class="xwt2_right_a"><a href="/wen/2019/09-26/2661.html" target="_blank">滴滴英文服务上线两周年 用户已超200万</a></div> <div class="xwt2_right_b">2019-09-26 08:57:12</div> </div> </div> <!-- --> <div class="xwt2"> <div class="xwt2_left"><a href="/wen/2019/09-25/2658.html" target="_blank"><img src="/d/file/p/2019/09-25/f1fa1fec5b880cfd1a751706904e0a9a.jpg"></a></div> <div class="xwt2_right"> <div class="xwt2_right_a"><a href="/wen/2019/09-25/2658.html" target="_blank">华为推出全球至快AI训练集群Atlas900</a></div> <div class="xwt2_right_b">2019-09-25 08:46:36</div> </div> </div> <!-- --> <div class="xwt2"> <div class="xwt2_left"><a href="/wen/2019/09-25/2654.html" target="_blank"><img src="/d/file/p/2019/09-25/efab381d1c3a96cd1c9d356201cab9f4.jpg"></a></div> <div class="xwt2_right"> <div class="xwt2_right_a"><a href="/wen/2019/09-25/2654.html" target="_blank">马斯克:特斯拉正组建中国技术团队</a></div> <div class="xwt2_right_b">2019-09-25 08:15:43</div> </div> </div> <!-- --> </div> <div class="right_ad1"> <!--广告 --> <script src=/d/js/acmsd/gao25.js></script> <!--广告 --> </div> <div class="right_001"> <div class="title2"> <p class="p1">疑难解答</p> </div> <div class="new3"> <ul> <!-- --> <li><a href="/wen/2019/10-28/48011.html" target="_blank">索泰发布一款GTX 1070 Mini迷你版本:小机箱</a></li> <!-- --> <li><a href="/wen/2019/10-28/48009.html" target="_blank">AMD新旗舰显卡轻松干翻NVIDIA 有几个点我们</a></li> <!-- --> <li><a href="/wen/2019/10-28/48010.html" target="_blank">i5 6500配什么显卡最佳?i5 6500配1060显卡可</a></li> <!-- --> <li><a href="/wen/2019/10-28/48007.html" target="_blank">AMD新一批显卡曝光:更便宜的14nm北极星</a></li> <!-- --> <li><a href="/wen/2019/10-28/48008.html" target="_blank">A卡自修改BIOS安装16.12.1 ReLive驱动教程 </a></li> <!-- --> <li><a href="/wen/2019/10-28/48005.html" target="_blank">2016笔记本显卡性能哪个好?笔记本显卡天梯图</a></li> <!-- --> <li><a href="/wen/2019/10-28/48006.html" target="_blank">2016显卡性能怎么看好坏 显卡天梯图2016年1</a></li> <!-- --> <li><a href="/wen/2019/10-28/48004.html" target="_blank">PS4 Pro显卡解析:显存带宽相当于标准版PS4</a></li> <!-- --> <li><a href="/wen/2019/10-28/48003.html" target="_blank">iGame 1050烈焰战神U-2GD5版图赏版:最美非</a></li> <!-- --> <li><a href="/wen/2019/10-28/48001.html" target="_blank">EVGA FTW GTX 1080/1070显卡存在严重问题:</a></li> <!-- --> </ul> </div> </div> <div class="right_001"> <div class="title2"> <p class="p1">图片精选</p> </div> <div class="new4"> <ul> <!-- --> <li class="m_R"><a href="/wen/2019/11-19/231565.html" target="_blank"><img src="/d/file/p/2019/11-19/48c2baabd02eeda91f7a863a735c3664.jpg"><p>使用ASP建设私人搜索引擎</p></a></li> <!-- --> <!-- --> <li><a href="/wen/2019/11-19/231380.html" target="_blank"><img src="/d/file/p/2019/11-19/6839114715eedd02be9efbc41e799115.gif"><p>华为短消息中心的发展与应用</p></a></li> <!-- --> <!-- --> <li class="m_R"><a href="/wen/2019/11-19/231379.html" target="_blank"><img src="/d/file/p/2019/11-19/afc42cb0fce3ad6579f2348fe202e5ea.jpg"><p>移动通信计费及客户服务系统</p></a></li> <!-- --> <!-- --> <li><a href="/wen/2019/11-19/231378.html" target="_blank"><img src="/d/file/p/2019/11-19/a00462dddd4d78988cd1b7deca8a3772.gif"><p>移动客户服务中心系统</p></a></li> <!-- --> </ul> </div> </div> <div class="right_ad1"> <!--广告 --> <script src=/d/js/acmsd/gao26.js></script> <!--广告 --> </div> <div class="right_001"> <div class="title2"> <p class="p1">网友关注</p> </div> <div class="new5"> <ul> <!-- --> <li><a href="/wen/2019/09-10/1720.html" target="_blank">u盘无法识别怎么办,小编告诉你U盘无法识别怎</a></li> <!-- --> <li><a href="/wen/2019/09-10/1721.html" target="_blank">usb无线网卡怎么用,小编告诉你安装教程</a></li> <!-- --> <li><a href="/wen/2019/09-10/1718.html" target="_blank">usb调试在哪,小编告诉你usb调试在哪</a></li> <!-- --> <li><a href="/wen/2019/09-10/1719.html" target="_blank">优盘不显示,小编告诉你优盘不显示怎么办</a></li> <!-- --> <li><a href="/wen/2019/09-10/1716.html" target="_blank">低级格式化,小编告诉你硬盘怎么低级格式化</a></li> <!-- --> <li><a href="/wen/2019/09-10/1717.html" target="_blank">分区表丢失,小编告诉你分区表丢失如何修复</a></li> <!-- --> <li><a href="/wen/2019/09-10/1714.html" target="_blank">进入bios,小编告诉你戴尔笔记本进入bios设置u</a></li> <!-- --> <li><a href="/wen/2019/09-10/1715.html" target="_blank">怎么刷bios,小编告诉你华硕怎么刷bios</a></li> <!-- --> <li><a href="/wen/2019/09-10/1712.html" target="_blank">读卡器怎么用,小编告诉你如何使用读卡器</a></li> <!-- --> <li><a href="/wen/2019/09-10/1713.html" target="_blank">bios升级,小编告诉你华硕主板bios怎么升级</a></li> <!-- --> </ul> </div> </div> </div> <div style="text-align:center;"><script src=/d/js/acmsd/gao27.js></script></div> <div style="clear:both;"></div> </div> <div style="clear:both;"></div> <!--footer--> <div class="footer"> <div class="bq"><a href="/d/about.html" target="_blank">关于本站</a> - <a href="/d/upload.html" target="_blank">网上投稿</a> - <a href="/d/business.html" target="_blank">商务合作</a> - <a href="/d/legal.html" target="_blank">隐私政策</a> - <a href="/d/sitemap.html" target="_blank">网站地图</a></div> <div class="bq"></div> <div class="bq"> Copyright © 2008 - 2019 VEVB.COM. All Rights Reserved.武林网 版权所有 </div> </div> <script src="/d/t.js"></script> <!--footer end--> <script src="/e/public/onclick/?enews=donews&classid=93&id=221178"></script> </body> </html>