首先到这个网址下载已经写好的dtree代码及其配置文件（如果网址失效了的话可以在评论区找我要这个文件）：
http://www.destroydrop.com/javascripts/tree/
使用谷歌浏览器将其界面语言翻译成中文后即可在当下页面找到下载超链接。下载之后的文件如图：
解压之后将其放在你所要运行的jsp或者html文件的同级目录下（保证下图的course_design文件夹在eclipse的web项目下的webapp文件夹下，这是需要确定的路径）。
如图：
（图中的dtree就是解压之后的文件）。然后点开这个文件夹，就会发现里面有一个文件夹叫“img”
，如图：
将这个文件夹复制到你所要运行的jsp或者html文件的同级目录下，如图：
如果不把这个文件夹复制到相关路径的话，那么创建出来dtree将会没有“路径点线”（这个名词的意思自己去网上搜）。
假设我要使用一个文件（文件名为“test3.jsp”）来显示dtree的话，那么就把dtree目录下的example01.html文件中的代码复制到test3.jsp中。然后再稍加修改就可以了。
下面就来说说要修改哪些地方：
第一步：
复制、粘贴完成后的test3.jsp中的代码如下（您可以直接复制它）：
| <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!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> |
第二步：
找到上面所有含路径的字段，并修改。我找到了自己所做项目相关的三段：
第1段：
<link rel="StyleSheet" href="dtree.css" type="text/css" />
<script type="text/javascript" src="dtree.js"></script>
第2段：
d.add(9,0,'My Pictures','example01.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif');
第3段：
d.add(12,0,'Recycle Bin','example01.html','','','img/trash.gif')
将第一段改为：
<link rel="StyleSheet" href="./dtree/dtree.css" type="text/css" />
<script type="text/javascript" src="./dtree/dtree.js"></script>
第二段和第三段中的地址分别是“与节点有关的图片”的相对地址，自己去文件夹“img”中找寻自己想要的图片写上就OK了。我的示例如下：
d.add(12,0,'Recycle Bin','example01.html','','','img/imgfolder.gif');
写在最后：
test3.jsp程序的运行结果如下：
1036
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
