http://www.matrix.org.cn/article/335.html
原創(chuàng) 作者-- joinme
Tree型結(jié)構(gòu)，Tree圖不管在哪個(gè)領(lǐng)域都是一個(gè)比較吃香的東東。在自己的網(wǎng)站或項(xiàng)目中有一個(gè)tree型圖或tree型結(jié)構(gòu)的權(quán)限（或角色，和數(shù)據(jù)庫(kù)設(shè)計(jì)相關(guān)），總能有那么一點(diǎn)點(diǎn)成就感。^_^
這篇文章就把我自己在這方面應(yīng)用的實(shí)踐整理一下拿出來。為您詳細(xì)介紹了在Tree有關(guān)方面應(yīng)用的完整實(shí)踐。
實(shí)例如下：
左邊的tree圖的實(shí)現(xiàn)方式是通過javascript+jsp實(shí)現(xiàn)。如果是為了實(shí)現(xiàn)邏輯上的tree結(jié)構(gòu)的維護(hù)，采用的是xml解決方案。
現(xiàn)在這里說一下,javascript+jsp的表現(xiàn)層的實(shí)現(xiàn)。這里的javascript并不是唯一的選擇，可以在網(wǎng)上下到類似的javascript(畢竟是共享的嘛。:) ).點(diǎn)這里可以下載相關(guān)代碼.
其中的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,'技術(shù)與方案','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,'網(wǎng)絡(luò)知識(shí)','admin.php?module=article&action=catelist&cid=7');
d.add(8,6,'配置手冊(cè)','admin.php?module=article&action=catelist&cid=8');
d.add(9,6,'網(wǎng)絡(luò)安全','admin.php?module=article&action=catelist&cid=9');
d.add(10,3,'解決方案','admin.php?module=article&action=catelist&cid=10');
d.add(11,10,'局域網(wǎng)','admin.php?module=article&action=catelist&cid=11');
d.add(12,10,'寬帶接入','admin.php?module=article&action=catelist&cid=12');
d.add(6,3,'網(wǎng)絡(luò)技術(shù)','admin.php?module=article&action=catelist&cid=6');
document．write(d);
-->
</script>
</div>
"d.add(3,0,'技術(shù)與方案','admin.php?module=article&action=catelist&cid=3','','_blank');
"中的"3"是當(dāng)前節(jié)點(diǎn)，"0"是父節(jié)點(diǎn),"技術(shù)與方案"是tree上顯示的節(jié)點(diǎn)名,"admin.php?......"指向的url."_blank"是指向的窗口。
從上可以看出，這個(gè)javascript已經(jīng)把tree圖實(shí)現(xiàn)的大部分工作已經(jīng)做好了。只要我們傳入對(duì)應(yīng)的數(shù)據(jù)就可以了。
首先是數(shù)據(jù)庫(kù)結(jié)構(gòu)。從上可以看出，有節(jié)點(diǎn)名，節(jié)點(diǎn)id,父節(jié)點(diǎn)id,節(jié)點(diǎn)url,節(jié)點(diǎn)target,還可以有個(gè)節(jié)點(diǎn)狀態(tài)（比如是激活或休眠，很常用用一種用法），當(dāng)然還可以有其它屬性，那就要根據(jù)項(xiàng)目的需要了。其實(shí)只要抓住一點(diǎn)，有唯一節(jié)點(diǎn)id和唯一父節(jié)點(diǎn)id就可以了（面向?qū)ο螅┚涂梢粤恕?BR>有了數(shù)據(jù)庫(kù)結(jié)構(gòu)，然后要實(shí)現(xiàn)tree圖就是根據(jù)一定的限制（比如權(quán)限，最后對(duì)應(yīng)為tree結(jié)構(gòu)的子集（當(dāng)然也必須是完整的tree結(jié)構(gòu)））取出符合條件并且完整的tree結(jié)構(gòu)的數(shù)據(jù)（我采用的解決方法是把權(quán)限對(duì)應(yīng)的節(jié)點(diǎn)的上溯父節(jié)點(diǎn)都取出來保證tree結(jié)構(gòu)的完整性,具體可以看java&xml心得(三)）.
假設(shè)我們已經(jīng)完成了上述的工作，那么要實(shí)現(xiàn)tree圖的代碼應(yīng)該如下:
.........
<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('沒有權(quán)限');");
}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,'權(quán)限列表');");
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,'退出系統(tǒng)','/zdtadmin/content/login.jsp','','_top');");
out.println("document．write(d);");
rsShow.close();
}
%>
-->
</script>
</div>
</body>
</html>
這樣就實(shí)現(xiàn)了動(dòng)態(tài)tree圖。
上面的這種實(shí)現(xiàn)是用jsp+javascript實(shí)現(xiàn)。也可以用xml+xsl來實(shí)現(xiàn)。不是必要，只是可以讓新手也了解一下關(guān)于xml的應(yīng)用。:)
比如我們已經(jīng)成功把數(shù)據(jù)庫(kù)的數(shù)據(jù)導(dǎo)出成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="鐏數(shù)宸ョ▼" parentid="11" target="_blank" url="/zdtadmin/newsadmin/list.jsp?tree_id=12"></col>
<col id="13" label="姘寸數(shù)宸ョ▼" parentid="11" target="_blank" url="/zdtadmin/newsadmin/list.jsp?tree_id=13"></col>
<col id="14" label="鏍哥數(shù)宸ョ▼" 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="涓婂競(jìng)鍏徃" 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="鐢?shù)鍔浛U戞櫘" 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>
其中亂碼是因?yàn)橛玫搅藆tf8編碼。就是節(jié)點(diǎn)名。在ie中可以正常顯示。
然后我們寫一個(gè)xsl來表示它，把它轉(zhuǎn)成一個(gè)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下測(cè)試通過。
我在xsl方面也只是了解皮毛。所以用到的也只是很基礎(chǔ)的東西。希望有人能寫一些關(guān)于xml+xsl方面的專業(yè)的文章。^_^
上面說的東西是b/s結(jié)構(gòu)下tree圖的表現(xiàn)層的實(shí)現(xiàn)。如果是邏輯上的結(jié)構(gòu)變更和定義，就不能靠jsp+javascript來實(shí)現(xiàn)了。我建議的解決方法是用tree型xml來實(shí)現(xiàn),如果直接操作數(shù)據(jù)庫(kù)的話，要遞歸并要保證結(jié)構(gòu)完整性，雖然能實(shí)現(xiàn)但是可能會(huì)很復(fù)雜，并且效力比較低。"tree型xml來實(shí)現(xiàn)"可以參考java&xml心得(三).
上面就是自己在Tree型結(jié)構(gòu) 數(shù)據(jù)-結(jié)構(gòu)維護(hù)-結(jié)構(gòu)交互-表現(xiàn) 上自己的理解。當(dāng)然還有很多不完善的地方。~_~ 希望能給大家一點(diǎn)幫助或啟示。 |