dTree建目录树

1.dTree的下载地址

官网：http://www.destroydrop.com/javascripts/tree/
效果图：

image.png

2.创建目录树的步骤

a.在jsp文件中 引入 dtree.js 和 dtree.css 文件

image.png

b.

    <script type="text/javascript"> 
        
        d = new dTree('d');
        d.add(0,-1,'My example tree');          //  根节点，父节点为-1  
        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>

效果图：

image.png

注意：

• add(parameters) 添加节点的信息

  
  image.png
• 参数可以不写完，有默认值（从左至右，依次省略）
  例：myTree.add(id,pid,name,url);，后面那5个参数就可以省略