dTree树型菜单API

红太狼 2020-11-01 09:09 629阅读 0赞

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" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>  
 <title>Destroydrop &raquo; Javascripts &raquo; Tree</title>

</head>

<body>

<h1><a href="/">Destroydrop</a> &raquo; <a href="/javascripts/">Javascripts</a> &raquo; <a href="/javascripts/tree/">Tree</a></h1>

<h2>Example</h2>

<p><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>

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&\#58;drop&\#64;destroydrop&\#46;com">&copy;2002-2003 Geir Landr&ouml;</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