Posted on 2007-04-29 14:20
flustar 閱讀(2090)
評論(0) 編輯 收藏
dtree動態(tài)樹+Javascript右鍵菜單（一）
1、從網(wǎng)上下載dtree控件。（好多地方都有的哦：P）
2、在Jbuilder中新建Web應(yīng)用，命名為TreeLearing
3、解壓縮dtree.rar包。
把dtree目錄拷貝至TreeLearing應(yīng)用中。
dtree目錄下包括這些文件：example01.html 、 dtree.js 、 api.html 、 dtree.css 和img目錄
注意：除了api.html之外，其它的文件都是必須拷貝的。只有這個(gè)api.html是對dtree控件的函數(shù)介紹。
4、復(fù)制example01.html，并把粘貼后的文件重命名為Tree.jsp
：） （保留原來的文件，以備參考是個(gè)好習(xí)慣哦~~）
注意dtree目錄下的文件結(jié)構(gòu)不要改變，否則樹就不會正常顯示
5、在Web應(yīng)用中指定首頁為Tree.jsp頁面。
6、Tree.jsp中的代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
<html>
<head>
<title>Destroydrop » Javascripts » Tree</title>
<link rel="StyleSheet" href="dtree.css" type="text/css" />
<script type="text/javascript" src="dtree.js"></script>
</head>
<body>
<h1><a href="/">Destroydrop</a> » <a href="/javascripts/">Javascripts</a> » <a href="/javascripts/tree/">Tree</a></h1>
<h2>Example</h2>
<div class="dtree">
<p><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'My example tree');
d.add(1,0,'Node 1','example01.html');
d.add(2,0,'Node 2','example01.html');
d.add(3,1,'Node 1.1','example01.html');
d.add(4,0,'Node 3','example01.html');
d.add(5,3,'Node 1.1.1','example01.html');
d.add(6,5,'Node 1.1.1.1','example01.html');
d.add(7,0,'Node 4','example01.html');
d.add(8,1,'Node 1.2','example01.html');
d.add(9,0,'My Pictures','example01.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif');
d.add(10,9,'The trip to Iceland','example01.html','Pictures of Gullfoss and Geysir');
d.add(11,9,'Mom\'s birthday','example01.html');
d.add(12,0,'Recycle Bin','example01.html','','','img/trash.gif');
document.write(d);
//-->
</script>
</div>
</body>
</html>
7、刪除紫紅色部分的代碼，因?yàn)椴恍枰丁?br />
8、注意看綠色和藍(lán)色部分的代碼，這才是真正為樹添加節(jié)點(diǎn)的部分。
d.add(0,-1,'My example tree');
這一句為樹添加了一個(gè)根節(jié)點(diǎn)，顯示名稱為'My example tree'
d.add(1,0,'Node 1','example01.html');
這一句在樹的根節(jié)點(diǎn)下面添加了一個(gè)子節(jié)點(diǎn)。（d.add（）方法的參數(shù)具體含義可參見api.html文件）
常用的：
第一個(gè)參數(shù)，表示當(dāng)前節(jié)點(diǎn)的ID
第二個(gè)參數(shù)，表示當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)的ID
第三個(gè)參數(shù)，節(jié)點(diǎn)要顯示的文字
第四個(gè)參數(shù)，點(diǎn)擊該節(jié)點(diǎn)的超鏈接（注意也可以是某個(gè)servlet或是struts應(yīng)用中的某個(gè).do請求）
第五個(gè)參數(shù)，鼠標(biāo)移至該節(jié)點(diǎn)時(shí)顯示的文字
第六個(gè)參數(shù)，指定點(diǎn)擊該節(jié)點(diǎn)時(shí)在哪個(gè)楨中打開超鏈接
……
9、運(yùn)行應(yīng)用程序?？梢钥吹揭豢闷恋臉洹?br />
原貼地址http://blog.sina.com.cn/u/4ae9618f010006y3