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）初始化一个树　

1	tree =  new  dTree( "tree" );

　　2)设置树的相关属性

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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)绘制完成

1	document.write(tree);

　　5、效果图

　　

6、dtree api

　　添加一个树节点的方法：

1	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) ;

from https://www.cnblogs.com/xwtbk/p/6554409.html

转载于:https://www.cnblogs.com/shizhijie/p/8818459.html