dTree 教程

最新推荐文章于 2023-07-21 23:58:36 发布

judyfun

最新推荐文章于 2023-07-21 23:58:36 发布

阅读量1.6w

点赞数 8

分类专栏： jQuery插件文章标签： dtree 教程 jquery插件树

本文链接：https://blog.csdn.net/judyfun/article/details/40889567

版权

jQuery插件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

dTree建树非常的简单，而且实用。

dTree的官网：http://www.destroydrop.com/javascripts/tree/

首先，从官网上下载 dtree.zip 的压缩包。

　 img文件夹：包含树形菜单显示需要的图标

　　 api.html ：dtree帮助文档

dtree.css：树形菜单的样式

　 dtree.js ： js核心文件，代码都在其中

example01.html：树形菜单实例(看完该文件应该就会模仿这用了)

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

<link rel="StyleSheet" href="dtree.css" type="text/css" /> 
<script type="text/javascript" src="dtree.js"></script>

dtree常用的方法：

add(parameters) 添加节点的信息

index	name	type	discription
1	id	number	当前节点的ID
2	pId	number	当前节点的父节点ID,根节点的值为-1
3	name	String	当前节点要显示的文字
4	url	String	点击当前节点跳转到的URL
5	title	String	鼠标移至该节点时节点显示的标题提示
6	target	String	节点链接所打开的frame
7	icon	String	节点显示的图标，无设置则使用默认图标
8	iconOpen	String	打开该节点后显示的图标，无设置则使用默认图标
9	open	Boolean	指定当前节点是否打开

例：

mydTree.add(1, 0, 'My node', 'node.html', 'node title', 'mainframe','img/musicfolder.gif');

dtree.js源文件中大约在 52 ~ 77 行中，是默认显示的图片路径，可以根据需要更换不同的图片。

灵活运用Add方法第四个参数：第四个参数是指链接地址，你不仅可以链接到指定网页，还还可以访问JavaScript方法：tree.add(x,x,x,”javascript:checkTree(x,…)”).这里是非常灵活的哦！

openAll() 打开所有的节点

可以再树被创建以前和创建以后调用。

例： mytree.openAll();

closeAll(); 关闭所有的节点

可以再树被创建以前和创建以后调用。

例：mytree.closeAll();

openTo(parameters) 打开指定的节点

可以再树创建以前和创建以后被调用

index	name	type	discription
1	id	number	需要打开的节点的ID号
2	select	boolean	判断节点是否被选择

例：mytree.openTo(4,true);

配置 config

配置干嘛用的？

其实配置就是在树初始化时对某些效果进行一些必要的设置，比如config.useIcons=false

意思就是所有节点不显示图片了

变量	类型	默认值	说明
target	String	true	所有节点的target
folderLinks	Boolean	true	文件夹可链接
useCookies	Boolean	true	树可以使用cookies记住状态
useLines	Boolean	true	创建带线的树
useIcons	Boolean	true	创建带有图标的树
useStatusText	Boolean	false	用节点名替代显示在状态栏的节点url
closeSameLevel	Boolean	false	只有一个有父级的节点可以被展开,当这个函数可用时openAll()和closeAll()函数将不可用
inOrder	Boolean	false	只有一个有父级的节点可以被展开,当这个函数可用时openAll()和closeAll()函数将不可用
useSelection	Boolean	true	节点可被选择(高亮)

例如：tree.config.closeSameLevel=true;表示打开某级节点时，该级其他处于打开状态的同级节点会被关闭

d.config.check = true; 给dtree的节点添加上复选框。

页面中的书写规约：

参数可以不写完，有默认值（从左至右，依次省略）

例：myTree.add(id,pid,name,url);，后面那5个参数就可以省略

有间隔时的默认值（如存在第六个参数，但是第5个想用默认值）

即：myTree.add(id,pid,name,url,"",target);

其他：myTree.add(id,pid,name,url,"","","","",true);

特殊：如果需要显示title（参数5），就必须设定相应的链接地址(参数4）

myTree.add(2.0,'仓储系统', 'a.jsp' , '这是第四个参数的title' ）；// 如果第四个参数为空则无法显示

静态建树：

                d = new dTree('d');

               <span style="white-space:pre">           //  每一个d.add()；方法就是一个节点

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

熟悉dtree的各种方法：

<a href = " javascript : tree.closeAll() ;"> close all</a>

<a href = " javascript : tree. openTo(1) ;" > 打开苹果节点</a>

<a href = "javascript : tree.openTo(1) ; javascript : tree.openTo(4);"> 打开 “苹果” 下的所有节点</a>

<a href = "javascript : tree.o(1) ; javascript : tree.o(4) ;"> 打开/关闭 “苹果” 下的所有节点</a>

//  判定节点是否打开
funtion boolNode(){
   var getValue = document.getElementById("sel").value ;
if ( tree.isOpen( getValue ) ) {
alert(" 当前是打开状态 ") ;
         } else  { 
alert( "当前是关闭状态" ) ;
         }
}

动态建树：

List<NoteBookDTO> dtoList=(List)request.getAttribute("dtoList");
<script type="text/javascript">
          tree=new dTree('tree');
           tree.add(0,-1,'笔记本电脑');
           <%response.setCharacterEncoding("gbk");
              while(dtoIte.hasNext()){
              Iterator<NoteBookDTO> dtoIte=dtoList.iterator();
             NoteBookDTO note=dtoIte.next();
           %>
             tree.add('<%=note.getId()%>','<%=note.getPId()%>','<%=note.getName()%>','forward.jsp?name=<%=note.getName()%>');
            <%
           }
           %>
           document.write(tree);
      </script>