<link rel="StyleSheet" href="css/dtree.css" type="text/css" />
<script type="text/javascript" src="js/dtree.js"></script>
必须引用的两个文件。
生成树 节点的代码:
<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>
d.add(0,-1,’My example tree’);
这一句为树添加了一个根节点,显示名称为’My example tree’
d.add(1,0,’Node 1’,’example01.html’);
这一句在树的根节点下面添加了一个子节点。(d.add()方法的参数具体含义可参见api.html文件)
常用的:
第一个参数,表示当前节点的ID
第二个参数,表示当前节点的父节点的ID,根节点的值为 -1
第三个参数,节点要显示的文字
第四个参数,节点的Url
第五个参数,鼠标移至该节点时节点的Title
第六个参数,节点的target
第七个参数,用做节点的图标,节点没有指定图标时使用默认值
第八个参数,用做节点打开的图标,节点没有指定图标时使用默认值
第九个参数,判断节点是否打开
add()
向树里添加一个节点
只能在树被创建之前调用.
必须 id, pid, name
参数
名字 类型 描述
id Number 唯一的ID号
pid Number 判定父节点的数字,根节点的值为 -1
name String 节点的文本标签
url String 节点的Url
title String 节点的Title
target String 节点的target
icon String 用做节点的图标,节点没有指定图标时使用默认值
iconOpen String 用做节点打开的图标,节点没有指定图标时使用默认值
open Boolean 判断节点是否打开
例子
mytree.add(1, 0, ’My node’, ’node.html’, ’node title’, ’mainframe’, ’img/musicfolder.gif’);
openAll()
打开所有节点
可在树被创建以前或以后调用.
例子
mytree.openAll();
closeAll()
关闭所有节点
可在树被创建以前或以后调用.
例子
mytree.closeAll();
openTo()
Opens the tree to a certain node and can also select the node.
只能在树被创建以后调用..
参数
名字 类型 描述
id Number 节点唯一的ID号
select Boolean 判断节点是否被选择
例子
mytree.openTo(4, true);
配置
变量 类型 默认值 描述
target String true 所有节点的target
folderLinks Boolean true 文件夹可链接
useSelection Boolean true 节点可被选择(高亮)
useCookies Boolean true 树可以使用cookies记住状态
useLines Boolean true 创建带线的树
useIcons Boolean true 创建带有图标的树
useStatusText Boolean false 用节点名替代显示在状态栏的节点url
closeSameLevel Boolean false 只有一个有父级的节点可以被展开,当这个函数可用时openAll() 和 closeAll() 函数将不可用
inOrder Boolean false 如果父级节点总是添加在子级节点之前,使用这个参数可以加速菜单显示.
例子
mytree.config.target = "mytarget";
分享到:
相关推荐
dTree.js是一款轻量级的JavaScript库,专门用于在网页中创建交互式的树形结构,如目录树或数据层级展示。这个压缩包包含了dTree.js的实现文件以及相关的API文档和示例,可以帮助开发者快速理解和使用这个库。 首先...
本资源提供了dtree库所需的两个关键文件:`dtree.css`和`dtree.js`,以及相关的图标和API文档,帮助开发者更便捷地在项目中集成和使用dtree。 `dtree.css`是CSS样式表文件,它包含了dtree控件的样式定义。这些样式...
4. **dtree.js** - 这是JavaScript文件,可能包含了一个用于创建和操作决策树的库。这个库可能实现了构建、训练和展示决策树的功能,支持用户以交互方式探索数据和模型的决策过程。 5. **img** - 图像文件夹,通常...
为了更好地利用这两个工具,开发者需要了解如何正确引入dtree.js和dtree.css到HTML文件中,以及如何使用JavaScript来创建和操作树形结构。同时,熟悉CSS选择器和样式层叠原理,可以帮助定制更符合项目需求的视觉效果...
需要用到的内容dtree.js
3. 在JavaScript中,使用`dtree.js` 提供的API创建树实例,传入容器元素和初始数据(通常是JSON格式)。 4. 调用API方法来操作树,例如添加、删除或更新节点。 5. 添加事件监听器以响应用户的交互,如点击节点、拖放...
Intraweb 是一个基于 Delphi 的组件库,用于构建服务器端的Web应用,而 dTree.js 是一个JavaScript库,专门用于创建可交互的、层次化的树状菜单。在这篇文章中,我们将深入探讨如何将Intraweb与dTree.js结合使用,以...
好用的dtree.js源代码。
`Dtree.js`是一个JavaScript组件,专为创建树形菜单而设计。本文将详细介绍如何利用`Dtree.js`在Java环境中构建动态的、交互式的树型菜单,以及这个组件的一些关键特性。 首先,`Dtree.js`是一个轻量级的JavaScript...
dTree.js是一个轻量级的JavaScript库,专门用于构建交互式的树形菜单。它提供了丰富的API和配置选项,使得开发者能够方便地自定义树形菜单的样式、行为以及数据来源。以下我们将逐步介绍如何在项目中使用dTree.js。 ...
在使用Dtree时,首先需要在HTML页面中引入`dtree.js`和`dtree.css`,然后根据`api.html`或`JavaScript树型菜单 dtree.txt`的指导,创建JSON格式的数据结构来表示树形菜单,并调用Dtree的API来实例化菜单。...
可以实现大量数据节点的dTree.js,希望可以对大家有帮助。
在本主题中,我们将深入探讨如何使用DTree.java来实现一个树型菜单。DTree是一个流行的JavaScript库,用于在JSP页面上构建可交互的树形结构,常用于网站导航或数据展示。 首先,DTree.js是这个树型菜单的核心脚本...
最近在网上找了个tree.js学习了一下,学习之余,改造了一下,使之用table方法显示tree,加以注释,希望能对初学者有用.之所用dtreetable.js名字,因为网上已现tabletree.js
自己写的select树的小例子,,树目录是用dtree实现的,,select标签是用div模拟的,,大家在document.getElementById("divSel").style.height = count + "px";加上"px",可以支持火狐,因为火狐语法很严格,,,想和大家分享练...
- data-tree.js:这可能是一个与dtree配合使用的数据处理模块,用于处理和格式化数据以适应dtree的展示需求。 这些JavaScript文件表明dtree是一个用于Web开发的库,可能通过HTML和JavaScript来创建和操作树状视图。...
它可能包含HTML结构以及嵌入的JavaScript代码,这些代码使用了`dtree.js`库来构建和操纵树型菜单。开发者可以通过查看和运行这个例子来快速理解DTree的工作原理,并且可以作为自己项目中的参考模板。 `dtree.js`是...