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="缁???ュ?ㄦ
</div>
</div>
</div>
</div>
</div>
<div class="indexmk_2">
<div class="cont">
<ul class="support">
<li>
<i class="iconfont icon-jiesuo"></i>
<h1>https访问</h1>
</li>
<li>
<i class="iconfont icon-shijian"></i>
<h1><a href="/contact.jsp">7*24小时服务</a></h1>
</li>
<li>
<i class="iconfont icon-kefu"></i>
<h1>专业一线支持</h1>
</li>
<li class="last">
<i class="iconfont icon-riqi"></i>
<h1><a href="/refund.jsp">7天无理由退款</a></h1>
</li>
</ul>
</div>
</div>
<div class="indexmk_2">
<div class="cont">
<ul class="bottom_nav">
<li>
<h1 title="关于我们">关于我们</h1>
<a href="/about.jsp">公司介绍</a>
<a href="/fjjsp/news/web/index.do?BOARD_ID=1">最新动态</a>
<a href="/contact.jsp">联系我们</a>
</li>
<li>
<h1 title="产品与服务">产品与服务</h1>
<a href="/domain/">域名注册</a>
<a href="/idc/">jsp空间</a>
<a href="/idc/php.jsp">php空间</a>
</li>
<li>
<h1 title="关于我们">常见问题</h1>
<a href="/help/jhost/index.htm" target="_blank">空间操作手册</a>
<a href="/fjjsp/news/web/new_view.do?NEW_ID=54">网站备案相关</a>
<a href="/refund.jsp">退款相关问题</a>
</li>
<li>
<h1 title="技术支持">技术支持</h1>
<a href="tencent://message/?uin=178966803&Site=福佳JSP空间&Menu=yes">技术 QQ ：178966803</a>
<a href="javascript:void(0);">联系电话：13616026886</a>
<a href="mailto:fjjsp@vip.163.com">联系邮箱：fjjsp@vip.163.com</a>
</li>
</ul>
<div class="subewm">
<img src="/common/images/qrcode.jpg" />
<p>扫描关注微信公众号</p>
</div>
</div>
</div>
<div class="footer">
<div class="cont">
<div class="sub">© 2005-2021 漳州市福佳网络科技有限公司 版权所有 <a href="//beian.miit.gov.cn/" target="_blank">闽ICP备09012882号-3</a></div>
<div class="sub"><a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=35060202000074" target="_blank" ><img src="/common/images/gab.png"/>闽公网安备 35060202000074号</a></div>
</div>
</div>
<div class="tool">
<div class="cus">
<div class="li js_qq">
<a href="javascript:void(0);" title="客服">
<i class="iconfont icon-rexian"></i>
</a>
<div class="wind_qq js_windqq" >
<div class="title">
<i class="iconfont icon-rexian"></i>
福佳空间在线客服
</div>
<a target="_blank" class="qq_link" title="客服1:20944024" href="tencent://message/?uin=20944024&Site=福佳JSP空间&Menu=yes">
<i class="iconfont icon-qq"></i>20944024
</a>
<a target="_blank" class="qq_link" title="客服2:178966803" href="tencent://message/?uin=178966803&Site=福佳JSP空间&Menu=yes">
<i class="iconfont icon-qq"></i>178966803
</a>
<a target="_blank" class="qq_link" title="客服3:1946551451" href="tencent://message/?uin=1946551451&Site=福佳JSP空间&Menu=yes">
<i class="iconfont icon-qq"></i>1946551451
</a>
</div>
</div>
<div class="li">
<a href="javascript:void(0);" title="扫一扫关注我们">
<i class="iconfont icon-erweima"></i>
<div class="tool_ewm"><img src="/common/images/qrcode.jpg"><p>扫描关注微信公众号</p></div>
</a>
</div>
<div class="li">
<a href="javascript:void(0);" title="客服热线">
<i class="iconfont icon-rexiandianhua"></i>
<div class="tool_tel">13616026886</div>
</a>
</div>
<div class="li">
<a href="/idc/" title="JAVA空间">
<i class="iconfont icon-java"></i>
<div class="tool_tel">JAVA空间</div>
</a>
</div>
<div class="li">
<a href="/idc/php.jsp" title="PHP空间">
<i class="iconfont icon-php"></i>
<div class="tool_tel">PHP空间</div>
</a>
</div>
<div class="li">
<a href="/domain/" title="域名">
<i class="iconfont icon-duoyuyan"></i>
<div class="tool_tel">域名注册</div>
</a>
</div>
</div>
<div class="shortcut" style="display: hidden;">
<a href="#" title="返回顶部">
<i class="iconfont icon-shouqi"></i>
</a>
</div>
</div>
<!--[if (gte IE 9)|!(IE)]><!-->
<script src="/common/plugins/jQuery/jquery-2.2.3.min.js"></script>
<!--<![endif]-->
<!--[if lt IE 9]>
<script src="/common/plugins/jQuery/jquery-1.11.1.min.js"></script>
<![endif]-->
<script type="text/javascript" src="/common/js/common.js"></script>
</body>
</html> 