dtree加载菜单基本使用方法

转自：https://blog.youkuaiyun.com/archer119/article/details/51382159

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/archer119/article/details/51382159
步骤1：官网下载dtree.zip包，官网地址：http://destroydrop.com/javascripts/tree/，文件包括dtree.css,dtree.js和api.html和例子；

步骤2：根据example01.html代码修改自己需要的菜单，示例代码如下：

<span style="font-size:14px;"><span style="white-space: pre;">    </span><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></span>
步骤3：运行效果图如下：

步骤4：要修改或添加图标，可以修改dtree.js代码，如下这段就是图标设置。

    this.icon = {
 
        root                : 'img/base.gif',
 
        folder            : 'img/folder.gif',
 
        folderOpen    : 'img/folderopen.gif',
 
        node                : 'img/page.gif',
 
        empty                : 'img/empty.gif',
 
        line                : 'img/line.gif',
 
        join                : 'img/join.gif',
 
        joinBottom    : 'img/joinbottom.gif',
 
        plus                : 'img/plus.gif',
 
        plusBottom    : 'img/plusbottom.gif',
 
        minus                : 'img/minus.gif',
 
        minusBottom    : 'img/minusbottom.gif',
 
        nlPlus            : 'img/nolines_plus.gif',
 
        nlMinus            : 'img/nolines_minus.gif'
 
    };

注意：树形结构根节点的父id必须为-1，如果要设置其他值请修改dtree.js。