当前页面位置: » 丰搜网 » 文档中心 » 详细内容
tree图全功略
原创 作者-- joinme
tree型结构，tree图不管在哪个领域都是一个比较吃香的东东。在自己的网站或项目中有一个tree型图或tree型结构的权限（或角色，和数据库设计相关），总能有那么一点点成就感。^_^
这篇文章就把我自己在这方面应用的实践整理一下拿出来。为您详细介绍了在tree有关方面应用的完整实践。
实例如下：
左边的tree图的实现方式是通过javascript+jsp实现。如果是为了实现逻辑上的tree结构的维护，采用的是xml解决方案。
现在这里说一下,javascript+jsp的表现层的实现。这里的javascript并不是唯一的选择，可以在网上下到类似的javascript(毕竟是共享的嘛。:) ).点这里可以下载相关代码.
其中的test.htm是javascript例子代码:
<script type="text/javascript" src="include/dtree.js"></script>
<div class="dtree">
<script type="text/javascript">
<!--
d = new dtree('d');
d.add(0,-1,'文章目录');
d.add(3,0,'技术与方案','admin.php?module=article&action=catelist&cid=3','','_blank');
d.add(5,0,'新闻中心','admin.php?module=article&action=catelist&cid=5');
d.add(34,5,'新闻中心','admin.php?module=article&action=catelist&cid=5');
d.add(35,34,'新闻中心','admin.php?module=article&action=catelist&cid=5');
d.add(36,35,'新闻中心','admin.php?module=article&action=catelist&cid=5');
d.add(37,36,'新闻中心','admin.php?module=article&action=catelist&cid=5');
d.add(38,37,'新闻中心','admin.php?module=article&action=catelist&cid=5');
d.add(7,6,'网络知识','admin.php?module=article&action=catelist&cid=7');
d.add(8,6,'配置手册','admin.php?module=article&action=catelist&cid=8');
d.add(9,6,'网络安全','admin.php?module=article&action=catelist&cid=9');
d.add(10,3,'解决方案','admin.php?module=article&action=catelist&cid=10');
d.add(11,10,'局域网','admin.php?module=article&action=catelist&cid=11');
d.add(12,10,'宽带接入','admin.php?module=article&action=catelist&cid=12');
d.add(6,3,'网络技术','admin.php?module=article&action=catelist&cid=6');
document.write(d);
-->
</script>
</div>
"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图的代码应该如下:
.........
<html>
<head>
<title>untitled document</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<link rel="stylesheet" href="images/cj_styles.css" type="text/css">
<script type="text/javascript" src="include/dtree.js"></script>
</head>
<body bgcolor="#ffffff" text="#000000" leftmargin="2" topmargin="0">
<div class="dtree">
<script type="text/javascript">
<!--
<%
if(!finds){
out.println("document.write('没有权限');");
}else{
result rsshow=resultfactory.getresult("vector");
rsshow.setconntype("jdbc");
rsshow.setsql(tempsqls);
rsshow.create();
out.println("d=new dtree('d');");
out.println("d.add(0,-1,'权限列表');");
string t_tree_id,t_tree_id_p,t_tree_name,t_tree_address,t_tree_target;
while(rsshow.next()){
t_tree_id=rsshow.getstring("tree_id");
t_tree_id_p=rsshow.getstring("tree_id_p");
t_tree_name=rsshow.getstring("tree_name");
t_tree_address=rsshow.getstring("tree_address");
t_tree_address+="?tree_id="+rsshow.getstring("tree_id")+"&tree_name="+rsshow.getstring("tree_name"); //t_tree_address+="edit/list.jsp?tree_id="+rsshow.getstring("tree_id")+"&tree_name="+rsshow.getstring("tree_name");
t_tree_target=rsshow.getstring("tree_target").length()>0?rsshow.getstring("tree_target"):"mainframe";
out.println("d.add("+t_tree_id+","+t_tree_id_p+",'"+t_tree_name+"','"+t_tree_address+"','','"+t_tree_target+"');");
}
out.println("d.add(-2,0,'退出系统','/zdtadmin/content/login.jsp','','_top');");
out.println("document.write(d);");
rsshow.close();
}
%>
-->
</script>
</div>
</body>
</html>
这样就实现了动态tree图。
上面的这种实现是用jsp+javascript实现。也可以用xml+xsl来实现。不是必要，只是可以让新手也了解一下关于xml的应用。:)
比如我们已经成功把数据库的数据导出成xml格式。代码如下：
<?xml version="1.0" ?>
<?xml:stylesheet type="text/xsl" href="ttx2.xsl" ?>
<table name="cm_tree">
<col id="1" label="闆嗗洟鏂伴椈" parentid="29" target="_blank" url="/zdtadmin/default.jsp"></col>
<col id="2" label="闆嗗洟瑕侀椈" parentid="1" target="_blank" url="/zdtadmin/newsadmin/list.jsp?tree_id=2"></col>
<col id="3" label="缁煎悎淇℃伅" parentid="1" target="_blank" url="/zdtadmin/newsadmin/list.jsp?tree_id=3"></col>
<col id="4" label="鏀跨瓥娉曡??" parentid="29" target="_blank" url="/zdtadmin/default.jsp"></col>
<col id="5" label="娉曞緥娉曡??" parentid="4" target="_blank" url="/zdtadmin/newsadmin/list.jsp?tree_id=5"></col>
<col id="7" label="鏀跨瓥鐮旂┒" parentid="4" target="_blank" url="/zdtadmin/newsadmin/list.jsp?tree_id=7"></col>
<col id="8" label="鐢熶骇缁忚惀" parentid="29" target="_blank" url="/zdtadmin/default.jsp"></col>
<col id="9" label="瀹夊叏鐢熶骇" parentid="8" target="_blank" url="/zdtadmin/newsadmin/list.jsp?tree_id=9"></col>
<col id="10" label="缁忚惀鍔ㄦ?? parentid="8" target="_blank" url="/zdtadmin/newsadmin/list.jsp?tree_id=10"></col>
<col id="11" label="宸ョ▼寤鸿??" parentid="29" target="_blank" url="/zdtadmin/default.jsp"></col>
<col id="12" label="鐏?鐢靛伐绋?" parentid="11" target="_blank" url="/zdtadmin/newsadmin/list.jsp?tree_id=12"></col>
<col id="13" label="姘寸數宸ョ▼" parentid="11" target="_blank" url="/zdtadmin/newsadmin/list.jsp?tree_id=13"></col>
<col id="14" label="鏍哥數宸ョ▼" parentid="11" target="_blank" url="/zdtadmin/newsadmin/list.jsp?tree_id=14"></col>
<col id="17" label="鍥介檯鍚堜綔" parentid="29" target="_blank" url="/zdtadmin/default.jsp"></col>
<col id="19" label="鍚堜綔鍔ㄦ?? parentid="17" target="_blank" url="/zdtadmin/newsadmin/list.jsp?tree_id=19"></col>
<col id="20" label="浼佷笟鏂囧寲" parentid="29" target="_blank" url="/zdtadmin/default.jsp"></col>
<col id="22" label="绮剧?炴枃鏄?" parentid="20" target="_blank" url="/zdtadmin/newsadmin/list.jsp?tree_id=22"></col>
<col id="24" label="鍏朵粬淇℃伅" parentid="29" target="_blank" url="/zdtadmin/default.jsp"></col>
<col id="25" label="澶╂皵棰勬姤" parentid="24" target="_blank" url="/zdtadmin/newsadmin/list.jsp?tree_id=25"></col>
<col id="26" label="浼佷笟鏂囧寲鍔ㄦ?? parentid="20" target="_blank" url="/zdtadmin/newsadmin/list.jsp?tree_id=26"></col>
<col id="27" label="鏂囧寲娲诲姩" parentid="20" target="_blank" url="/zdtadmin/newsadmin/list.jsp?tree_id=27"></col>
<col id="29" label="鍐呭?圭?＄悊" parentid="0" target="_blank" url="/zdtadmin/default.jsp"></col>
<col id="31" label="鏍忕洰缁存姢" parentid="0" target="_blank" url="/zdtadmin/treeadmin/tree_edit.jsp"></col>
<col id="32" label="瑙掕壊缁存姢" parentid="0" target="_blank" url="/zdtadmin/default.jsp"></col>
<col id="41" label="澶氱?嶄骇涓?" parentid="8" target="_blank" url="/zdtadmin/newsadmin/list.jsp?tree_id=41"></col>
<col id="42" label="涓婂競鍏?鍙?" parentid="8" target="_blank" url="/zdtadmin/newsadmin/list.jsp?tree_id=42"></col>
<col id="44" label="娣诲姞瑙掕壊" parentid="32" target="_blank" url="/zdtadmin/peradmin/role_edit.jsp"></col>
<col id="45" label="瑙掕壊-鏍忕洰" parentid="32" target="_blank" url="/zdtadmin/peradmin/role_tree.jsp"></col>
<col id="46" label="瑙掕壊-鐢ㄦ埛" parentid="32" target="_blank" url="/zdtadmin/peradmin/role_user.jsp"></col>
<col id="47" label="鏂囦欢涓嬭浇" parentid="24" target="_blank" url="/zdtadmin/newsadmin/down_list.jsp"></col>
<col id="48" label="鐢ㄦ埛绠＄悊" parentid="0" target="_blank" url="/zdtadmin/useradmin/user_list.jsp"></col>
<col id="51" label="涓撴爮" parentid="29" target="_blank" url="/zdtadmin/default.jsp"></col>
<col id="52" label="鐢靛姏绉戞櫘" parentid="51" target="_blank" url="/zdtadmin/newsadmin/list.jsp?tree_id=52"></col>
<col id="53" label="鍩虹??绠＄悊骞? parentid="51" target="_blank" url="/zdtadmin/newsadmin/list.jsp?tree_id=53"></col></table>
其中乱码是因为用到了utf8编码。就是节点名。在ie中可以正常显示。
然后我们写一个xsl来表示它，把它转成一个html来显示。
"<?xml:stylesheet type="text/xsl" href="ttx2.xsl" ?>"指定了我们要用
ttx2.xsl来表示它。代码如下：
<?xml version='1.0' ?>
<xsl:stylesheet version='1.0' xmlns:xsl="http://www.w3.org/tr/wd-xsl" >
<xsl:template match="/">
<html>
<head>
<title>tree test</title>
</head>
<body>
<script type="text/javascript" src="include/dtree.js"></script>
<script type="text/javascript">
d=new dtree('d');
d.add(0,-1,"list");
<xsl:apply-templates select="/table"/>
document.write(d);
</script>
</body>
</html>
</xsl:template>
<xsl:template match="/table">
<xsl:for-each select="col">
d.add(<xsl:value-of select="@id"/>,<xsl:value-of select="@parentid"/>,'<xsl:value-of select="@label"/>','<xsl:value-of select="@url"/>','<xsl:value-of select="@label"/>','<xsl:value-of select="@target"/>');
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>
这些例子在打包文件里可以找到。我在ie 6.0下测试通过。
我在xsl方面也只是了解皮毛。所以用到的也只是很基础的东西。希望有人能写一些关于xml+xsl方面的专业的文章。^_^
上面说的东西是b/s结构下tree图的表现层的实现。如果是逻辑上的结构变更和定义，就不能靠jsp+javascript来实现了。我建议的解决方法是用tree型xml来实现,如果直接操作数据库的话，要递归并要保证结构完整性，虽然能实现但是可能会很复杂，并且效力比较低。"tree型xml来实现"可以参考java&xml心得(三).
上面就是自己在tree型结构 数据-结构维护-结构交互-表现 上自己的理解。当然还有很多不完善的地方。~_~ 希望能给大家一点帮助或启示。
