今天在做通訊錄的功能模塊，因為要用數展現，在網上搜了一下有關于這方面的資料，現轉貼來看看。
dtree動態樹+Javascript右鍵菜單（一）
1、從網上下載dtree控件。（好多地方都有的哦：P）
2、在Jbuilder中新建Web應用，命名為TreeLearing
3、解壓縮dtree.rar包。
把dtree目錄拷貝至TreeLearing應用中。
dtree目錄下包括這些文件：example01.html 、 dtree.js 、 api.html 、 dtree.css 和img目錄
注意：除了api.html之外，其它的文件都是必須拷貝的。只有這個api.html是對dtree控件的函數介紹。
4、復制example01.html，并把粘貼后的文件重命名為Tree.jsp
：） （保留原來的文件，以備參考是個好習慣哦~~）
注意dtree目錄下的文件結構不要改變，否則樹就不會正常顯示
5、在Web應用中指定首頁為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>
<p><a href="mailto:drop@destroydrop.com">©2002-2003 Geir Landrö</a></p>
</body>
</html>
7、刪除紫紅色部分的代碼，因為不需要哦。
8、注意看綠色和藍色部分的代碼，這才是真正為樹添加節點的部分。
d.add(0,-1,'My example tree');
這一句為樹添加了一個根節點，顯示名稱為'My example tree'
d.add(1,0,'Node 1','example01.html');
這一句在樹的根節點下面添加了一個子節點。（d.add（）方法的參數具體含義可參見api.html文件）
常用的：
第一個參數，表示當前節點的ID
第二個參數，表示當前節點的父節點的ID
第三個參數，節點要顯示的文字
第四個參數，點擊該節點的超鏈接（注意也可以是某個servlet或是struts應用中的某個.do請求）
第五個參數，鼠標移至該節點時顯示的文字
第六個參數，指定點擊該節點時在哪個楨中打開超鏈接
……
9、運行應用程序。可以看到一棵漂亮的樹。
原貼地址http://minifishpingping.spaces.live.com/blog/cns!167be6972d4b3ac!139.entry
Dtree所引用的css
一：dtree.css
.dtree {//定義目錄樹節點的字體，字號，顏色
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #006600;
white-space: nowrap;
}
.dtree img {//定義選用節點圖標的樣式，位置
border: 0px;
vertical-align: middle;
}
.dtree a {//
color: #006600;
text-decoration: none;
}
.dtree a.node, .dtree a.nodeSel {
white-space: nowrap;//表格隨著文字自動伸展（如果未設置TD寬度，則noWrap屬性是起作用的；如果設置了TD寬度，則noWrap屬性是不起作用的。）
padding: 0px 0px 0px 0px;
}
.dtree a.node:hover, .dtree a.nodeSel:hover {
color: #006600;
text-decoration: none;
}
.dtree a.nodeSel {//節點選中后的節點背景顏色
background-color: #c0d2ec;
}
.dtree .clip {
overflow: hidden;
}
二：tree.css
body {SCROLLBAR-FACE-COLOR:#D2FFD2;
SCROLLBAR-HIGHLIGHT-COLOR: #8AA583;
SCROLLBAR-SHADOW-COLOR: #8AA583;
SCROLLBAR-3DLIGHT-COLOR: #ffffff;
SCROLLBAR-ARROW-COLOR: #8AA583;
SCROLLBAR-TRACK-COLOR: #E1FFE1;
SCROLLBAR-DARKSHADOW-COLOR: #ffffff;
background-attachment: fixed;
//scroll : 背景圖像是隨對象內容滾動
//fixed : 背景圖像固定
background-repeat: no-repeat;
//background-repeat : repeat | no-repeat | repeat-x | repeat-y
//repeat : 背景圖像在縱向和橫向上平鋪
//no-repeat : 背景圖像不平鋪
//repeat-x : 背景圖像在橫向上平鋪
//repeat-y : 背景圖像在縱向平鋪
background-color: EFF7F7;
}
Dtree目錄樹的總結
一：函數1：頁面中tree.add(id,pid,name,url,title,target,icon,iconOpen,open);參數說明：id ：節點自身的idpid ：節點的父節點的idname ：節點顯示在頁面上的名稱url ：節點的鏈接地址title ：鼠標放在節點上所出現的提示信息target ：節點鏈接所打開的目標frame（如框架目標mainFrame或是_blank,_self之類）icon ：節點關閉時的顯示圖片的路徑iconOpen：節點打開時的顯示圖片的路徑open ：布爾型，節點是否打開（默認為false）注：open項：頂級節點一般采用true，即pid是－1的節點2：dtree.js文件中約87－113行是一些默認圖片的路徑，注意要指對。二：頁面中的書寫1：默認值的書寫規則（從左至右，依次省略）即 tree.add(id,pid,name,url);后面5個參數可以省略2：有間隔時的默認值（如存在第6個參數，但第5個參數想用默認值）即 tree.add(id,pid,name,url,"",target);必須這樣寫其他 tree.add(id,pid,name,url,"","","","",true);3：樣式表（1）：可以將dtree.css中的樣式附加到你的應用中的主css中，如a.css（2）：也可以同時引用dtree.css與a.css兩個文件，但前提條件是兩個css文件中不能有重復的樣式<link href="/jingjindatabase/pub/css/a.css" rel="stylesheet" type="text/css" />
<link href="/jingjindatabase/pub/css/dtree.css" rel="stylesheet" type="text/css" />
4：頁面代碼書寫的位置是：一般寫在表格的td之中<script type="text/javascript" src="/myMobanGis/pub/js/dtree.js"></script>
<script type="text/javascript">
tree = new dTree('tree');
tree.add("1","-1","京津","","","","","",true);
tree.add("11","1","A","","","","","",true);
tree.add("110","11","A-1","content.jsp?moduleName=XXX","","mainFrame");
tree.add("111","11","A-2","javascript:void(0)","","鏈接在哪里顯示");
tree.add("112","11","A-3","javascript:void(0)","","mainFrame");
tree.add("113","11","A-4","/.jsp","","mainFrame");
tree.add("114","11","A-5","/.jsp","","mainFrame");
tree.add("115","11","A-6","/.jsp","","mainFrame");
tree.add("12","1","B","","","","","",true);
tree.add("121","12","B-1","javascript:調用本頁內的js函數","","mainFrame");
tree.add("122","12","B-2");tree.add("13","1","C","","","","","",true);
tree.add("131","13","C-1","javascript:void(0)","","mainFrame");
tree.add("132","13","C-2","javascript:void(0)","","mainFrame");
tree.add("133","13","C-3","javascript:void(0)","","mainFrame");tree.add("14","1","D","","","","","",true);
tree.add("141","14","D-1","javascript:void(0)","","mainFrame");
document.write(tree);
</script>
說明：這是靜態的代碼，動態的可用循環加入。
三：css文件的注解
1:dtree.css
.dtree {//定義目錄樹節點的字體，字號，顏色
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #006600;
white-space: nowrap;
}
.dtree img {//定義選用節點圖標的樣式，位置
border: 0px;
vertical-align: middle;
}
.dtree a {//
color: #006600;
text-decoration: none;
}
.dtree a.node, .dtree a.nodeSel {
white-space: nowrap;
padding: 0px 0px 0px 0px;
}
.dtree a.node:hover, .dtree a.nodeSel:hover {
color: #006600;
text-decoration: none;
}
.dtree a.nodeSel {
background-color: #c0d2ec;
}
.dtree .clip {
overflow: hidden;
}
原貼地址http://blog.sina.com.cn/u/4ae9618f010006y3
posted on 2007-04-11 17:39
lansky07 閱讀(2663)
評論(3) 編輯 收藏