JavaScript dTree 实现与应用详解

4星 · 超过85%的资源需积分: 41 32 浏览量更新于2024-09-17 收藏 4KB TXT 举报

"dtree 是一个基于JavaScript的可扩展的树形目录库，适用于网页开发，提供无限级别的节点、无框架或有框架的使用选择、跨页面保持树的状态记忆、在一个页面上支持多个树结构，并且兼容所有主流浏览器，如Internet Explorer 5+、Netscape 6+、Opera 7+和Mozilla。它产生的输出符合XHTML 1.0严格标准，并且每个节点可以有替代图像。使用dtree，开发者需要下载dtree.zip文件，包含img、api.html、dtree.css和dtree.js等资源，然后在网页中引入这些资源并创建树形结构。以下是对dtree的详细使用步骤： 1) 下载dtree资源包：访问http://www.destroydrop.com/javascripts/tree/dtree.zip获取dtree的压缩文件，解压后会得到用于表示节点图标的img文件夹、介绍dtree的api.html、定义样式dtree.css以及核心JavaScript文件dtree.js。 2) 将解压后的文件上传到Web服务器根目录，例如将example01.html放在可访问的位置。 3) 在需要展示树形结构的HTML文件中，引入dtree.css和dtree.js。在<head>部分添加以下代码： ```html <link rel="StyleSheet" href="dtree.css" type="text/css"/> <script type="text/javascript" src="dtree.js"></script> ``` 然后，在<body>部分创建一个div元素，指定class为"dtree"，作为树的容器： ```html <div class="dtree"> <script type="text/javascript"> tree = new dTree('tree'); </script> </div> ``` 4) 创建树节点：使用`tree.add(parameters)`方法来添加节点。该方法接受9个参数，分别是id（整数，节点唯一标识）、pid（整数，父节点id）、name（字符串，节点文本）、url（字符串，链接地址）、title（字符串，鼠标悬停时显示的提示信息）、target（字符串，链接打开的目标窗口或框架）、icon（字符串，关闭状态下的节点图标）、iconOpen（字符串，展开状态下的节点图标）和open（布尔值，是否默认展开）。例如： ```javascript tree.add(1, 0, '父节点1', null, null, null, 'icon.gif', 'icon_open.gif', false); tree.add(2, 1, '子节点1', 'http://example.com', null, '_blank', 'child_icon.gif', 'child_icon_open.gif', true); ``` 以上步骤完成后，运行example01.html，你将会看到一个基本的dtree树形目录结构。 dtree是一个功能强大的JavaScript库，用于构建交互式的多级目录结构，它提供了丰富的定制选项和良好的浏览器兼容性，是网页开发中的理想工具。通过下载资源、引入文件和创建节点，你可以轻松地在自己的项目中实现自定义的树形视图。"

dtree下载地址：http://www.destroydrop.com/javascripts/tree/dtree.zip
简介
　　dtree是一个由JavaScript编写成的简单的树形菜单组件，目前免费并且开源。　　目前有很多的树形菜单组件(比如ext)，dtree是一种简单易懂的js组件，不需要复杂的操作即可生产，同时支持动态从数据库引入数据。
　　dTree可以不用添加任何页面而直接用代码实现多个栏目，并可以实现无限分级，下面是官方介绍的优点：
　　- Unlimited number of levels(无限分级)
　　- Can be used with or without frames(可用于框架或非框架页面)
　　- Remembers the state of the tree between pages(在不同页面之间可记住当前状态)
　　- Possible to have as many trees as you like on a page(可以得到你想要数量的树型)
　　- All major browsers suported(支持的浏览器)
　　Internet Explorer 5+ Netscape 6+ Opera 7+ Mozilla
　　- Generates XHTML 1.0 strict validated output(严格支持XHTML 1.0)
　　- Alternative images for each node(每个节点用图片代替)
创建dtree
　　1)从官网上下载dtree的源文件压缩包“dtree.zip”，包内包含以下几个文件：
　　img文件夹：包含树形菜单显示需要的图标
　　api.html ：作者写的dtree帮助文档
　　dtree.css：树形菜单的样式
　　dtree.js ： js核心文件，代码都在其中
　　example01.html：树形菜单实例
　　2)将压缩包内的文件拷贝到项目webroot下(example01.html可以不拷贝)
　　3)新建一个web文件(*.html、*.jsp...都可以)，首先引入css和js文件：
　　<link rel="StyleSheet" href="dtree.css" type="text/css" />
　　<script type="text/javascript" src="dtree.js"></script>
　　然后在<body>里创建一个div层，指定class为“dtree”，此时该层就引用了dtree的样式
　　<div class="dtree">
　　<script type="text/javascript">
　　tree = new dTree('tree');
　　......
　　</script>
　　</div>

下载后可阅读完整内容，剩余3页未读，立即下载

钾肥

粉丝: 2

JavaScript dTree 实现与应用详解

dtree.js

dtree使用文档，教你怎么用dtree

使用DTree创建树

dtree资料 详细文档

dtree简单介绍

用dtree实现树形菜单 dtree使用说明

dtree jsp 中使用,dtree jsp 中使用

DTree控件介绍_原创

dtree.zip dtree 例子 dtree 资料

dtree的使用方法和类库

最新资源

dtree资料详细文档