Dtree【树形下拉框】
生活随笔
收集整理的這篇文章主要介紹了
Dtree【树形下拉框】
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1、從網上下載dtree控件. 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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <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請求） ???? 第五個參數，鼠標移至該節點時顯示的文字 第六個參數，指定點擊該節點時在哪個楨中打開超鏈接
<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請求） ???? 第五個參數，鼠標移至該節點時顯示的文字 第六個參數，指定點擊該節點時在哪個楨中打開超鏈接
轉載于:https://www.cnblogs.com/LeeYan/archive/2009/01/12/1374102.html
總結
以上是生活随笔為你收集整理的Dtree【树形下拉框】的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [转]Linux系统中用户帐户清洁与安全
- 下一篇： 密码强弱度检测万能插件