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="335582.html" ?><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>
</span><!--正文内容结束--></div>
</td>
</tr>
<tr>
<td>
<script type='text/javascript'>
cpro_client='sayyescpr';
cpro_at='text_image';
cpro_161=4;
cpro_flush=1;
cpro_w=500;
cpro_h=200;
cpro_template='text_default_500_200';
cpro_cbd='#FFFFFF';
cpro_cbg='#FFFFFF';
cpro_ctitle='#0000ff';
cpro_cdesc='#444444';
cpro_curl='#E6E6E6';
cpro_cflush='#e10900';
cpro_uap=0;
cpro_cad=1;
cpro_channel=7810;
</script>
</td>
</tr>
<tr>
<td class="t25"><b> 上一篇：<a href="365100.html" title="关掉那可恶的Dos窗口" target="_blank">关掉那可恶的Dos窗口</a>
人气:691 <br>
下一篇：<a href="203.html" title="Sun用AppServer 8.0反击对手" target="_blank">Sun用AppServer 8.0反击对手</a>
人气:508</b></td>
</tr>
<tr>
<td class="t20"><b><a href="../" target="_blank"><font color="#0000FF">浏览全部</font><font color="#FF0000">Java</font><font color="#0000FF">的内容</font></a>
</b><a href="tools/mxp/index.htm" target="_blank">Dreamweaver插件下载</a> <a href="tools/ad/index.htm" target="_blank">网页广告代码</a> <a href="jieri/xmas/index.htm" target="_blank">祝你圣诞节快乐</a> <a href="jieri/NewYear/index.htm" target="_blank">2009年新年快乐</a><br>
<script type="text/javascript"><!--
google_ad_client = "pub-6565147514244127";
/* 468x15, 创建于 08-10-7 */
google_ad_slot = "3244423498";
google_ad_width = 468;
google_ad_height = 15;
//-->
</script>
<script type="text/javascript"
src="../pagead2.googlesyndication.com/pagead/show_ads.js" >
</script>
</td>
</tr>
</table>
</td>
</tr>
</table><table width="860" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="207" bgcolor="#F5F5F5" valign="top" align="center" height="2">
</td>
<td colspan="2" valign="top" height="2" align="center">
</td>
</tr></table>
<table width="860" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#F6F6F6">
<tr align="center" bgcolor="#CCCCCC">
<td height="5"><img src="../img.knowsky.com/img/blank.gif" width="1" height="1"></td>
</tr>
</table>
</body>
</html> 