http://www.matrix.org.cn/article/335.html
原创 作者-- 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.lt;/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型结构 数据-结构维护-结构交互-表现 上自己的理解。当然还有很多不完善的地方。~_~ 希望能给大家一点帮助或启示。 |