dtree大型树插件

一、dtree简介

dtree是一个由JavaScript编写成的简单的树形菜单组件，目前免费并且开源。同时支持动态从数据库引入数据。

二、使用方法

1、下载dtree.js及dtree.css

　　下载地址：http://destroydrop.com/javascripts/tree/

　　2、引入dtree.js及dtree.css

　 3、html

<div class="tree"></div>

　　4、js代码

　　1）初始化一个树　

tree = new dTree("tree");

　　2)设置树的相关属性

                tree.add(0,-1,'My example tree');

		tree.add(1,0,'Node 1','#');

		tree.add(2,0,'Node 2','#');

		tree.add(3,1,'Node 1.1','#');

		tree.add(4,0,'Node 3','#');

		tree.add(5,3,'Node 1.1.1','#');

		tree.add(6,5,'Node 1.1.1.1','#');

		tree.add(7,5,'Node 1.1.1.2','#','标题','_parent');

		tree.add(7,0,'Node 4','#');

		tree.add(8,1,'Node 1.2','#');

		tree.add(9,0,'My Pictures','#','Pictures I\'ve taken over the years','','','img/imgfolder.gif');

		tree.add(10,9,'The trip to Iceland','#','Pictures of Gullfoss and Geysir');

		tree.add(11,9,'Mom\'s birthday','#');

		tree.add(12,0,'Recycle Bin','#','','','img/trash.gif');

　　3)绘制完成

　　　　　　　　　document.write(tree);

　　5、效果图

6、dtree api

　　添加一个树节点的方法：

　　　add(id,pid,name,url,title,target,icon,iconOpen,open);

　　参数说明：

1） id int 节点自身的id(唯一)

2） pid int 节点的父节点id

3） name string 节点显示在页面上的名称

4） url string 节点的链接地址

5） title string 鼠标放在节点上显示的提示信息

6） target string 节点链接所打开的目标frame

7） icon string 节点关闭状态时显示的图标

8） iconOpen string 节点打开状态时显示的图标

9） open boolen 节点第一次加载是否打开

7、dtree的方法

openAll(); //打开所有树节点，在生成树之前或者之后使用。

例子：tree.openAll();

closeAll(); //关闭所有树节点，在生成树之前或者之后使用。

例子：tree.closeAll();

openTo(); //打开某一个树节点，仅在树生成后使用。

例子：tree.openTo(3,true) ;

巴特西

dtree大型树插件

最新文章

热门文章