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型結構 數據-結構維護-結構交互-表現 上自己的理解。當然還有很多不完善的地方。~_~ 希望能給大家一點幫助或啟示。 |