原始dtree+右键dtree+复选框dtree资源-CSDN下载

共82个文件

gif：63个

html：6个

js：5个

原始dtree+右键dtree+复选框dtree

5星 · 超过95%的资源需积分: 13 158 浏览量 2011-11-08 10:14:58 上传评论收藏 87KB RAR 举报

在IT领域，树形结构是一种常见的数据表示方式，尤其在用户界面设计中，它用于组织和展示层次化信息。在这个话题中，我们将深入探讨三种特定的树形结构实现：原始dtree、右键dtree以及复选框dtree，这些都是在JavaScript环境下用于创建交互式树形菜单的工具。原始dtree是最基础的形式，它通常基于HTML、CSS和JavaScript实现，提供基本的树节点展开和折叠功能。这种实现方式的核心在于递归地构建DOM元素来形成树状结构，并通过JavaScript事件监听处理用户的交互，如点击节点来展开或折叠子节点。原始dtree适用于简单的项目，但它可能缺乏一些高级特性，比如搜索、拖放或者右键菜单。接下来是右键dtree，这是对原始dtree的一种增强，通过集成jQuery库，增加了右键上下文菜单功能。jQuery使得DOM操作更加简洁高效，而右键菜单则为用户提供了更多的操作选项，例如复制、剪切、粘贴、删除等，增强了用户体验。在实现上，开发者需要监听鼠标右键点击事件，然后动态生成并显示菜单，同时处理各种菜单项的点击事件。最后是复选框dtree，它是针对dtree的一种扩展，允许用户多选节点。在实际应用中，这在需要用户选择多个选项的场景中非常有用，如设置权限、选择目录等。实现复选框dtree时，我们需要修改dtree的源码，添加复选框元素并处理它们的勾选状态。同时，还需要考虑父子节点之间的关联性，比如父节点的勾选状态应根据其所有子节点的勾选状态自动更新。在提供的压缩包中，可能包含以下内容： 1. `dtree.js`：包含了原始dtree的核心代码。 2. `dtree_rightclick.js`：这是右键dtree的实现，基于`dtree.js`进行扩展，添加了右键菜单功能。 3. `dtree_checkbox.js`：复选框dtree的实现，修改了`dtree.js`的源码，加入了复选框元素和相应的逻辑。 4. HTML和CSS文件：用于展示和样式化dtree实例。 5. 示例数据：可能包括JSON或其他格式的数据文件，用于填充树形结构。这三种dtree实现都是为了满足不同需求的树形菜单设计。原始dtree提供基础功能，右键dtree增强了交互性，而复选框dtree则提供了多选操作。开发者可以根据项目需求选择适合的版本，或者进一步定制以适应更复杂的应用场景。

资源推荐

资源详情

资源评论

收起资源包目录

dtree.rar （82个子文件）

dtree

dtree右键

dtree

index.html 3KB

cross.png 655B

api.html 5KB

email.png 641B

img

folderopen.gif 376B

nolines_minus.gif 861B

minus.gif 86B

nolines_plus.gif 870B

line.gif 66B

question.gif 1KB

globe.gif 1KB

plusbottom.gif 88B

join.gif 69B

empty.gif 62B

plus.gif 89B

minusbottom.gif 85B

imgfolder.gif 622B

joinbottom.gif 66B

page.gif 582B

musicfolder.gif 633B

trash.gif 1KB

folder.gif 372B

cd.gif 239B

base.gif 1KB

jquery-1.1.3.js 157KB

disk.png 620B

index.html.bak 3KB

dtree.js 13KB

dtree.css 795B

folder.png 537B

jquery.contextmenu.js 4KB

api.html 5KB

dtree原始

api.html 5KB

example01.html 2KB

img

folderopen.gif 376B

nolines_minus.gif 861B

minus.gif 86B

nolines_plus.gif 870B

line.gif 66B

question.gif 1KB

globe.gif 1KB

plusbottom.gif 88B

join.gif 69B

empty.gif 62B

plus.gif 89B

minusbottom.gif 85B

imgfolder.gif 622B

joinbottom.gif 66B

page.gif 582B

musicfolder.gif 633B

trash.gif 1KB

folder.gif 372B

cd.gif 239B

base.gif 1KB

dtree.js 12KB

dtree.css 795B

example01.html 2KB

img

folder1.gif 372B

folderopen.gif 270B

nolines_minus.gif 861B

minus.gif 86B

nolines_plus.gif 870B

line.gif 66B

question.gif 1KB

globe.gif 1KB

plusbottom.gif 88B

join.gif 69B

empty.gif 62B

plus.gif 89B

minusbottom.gif 85B

1page.gif 582B

imgfolder.gif 622B

joinbottom.gif 66B

page.gif 271B

musicfolder.gif 633B

trash.gif 1KB

folder.gif 275B

1base.gif 1KB

cd.gif 239B

base.gif 219B

dtree.js 14KB

dtree.css 795B

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Destroydrop » Javascripts » Tree » Api</title> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" /> <link rel="stylesheet" href="/dd.css" type="text/css" /> <link rel="shortcut icon" href="/favicon.ico" /> </head> <body> <div id="shadow"> <div id="content"> <div id="location"> <h1><a href="/">Destroydrop</a> » <a href="/javascripts/">Javascripts</a> » <a href="/javascripts/tree/">Tree</a> » <a href="/javascripts/tree/api/">Api</a></h1> </div> <div class="line"></div> <div id="files"> <h3>Overview</h3> <div class="line"></div> <div class="item"> <ul class="arrow"> <li><a href="#functions">Functions</a> <ul class="arrow"> <li><a href="#add">add</a></li> <li><a href="#openall">openAll</a></li> <li><a href="#closeall">closeAll</a></li> <li><a href="#opento">openTo</a></li> </ul> </li> <li><a href="#configuration">Configuration</a></li> </ul> </div> <a name="functions"></a> <h3>Functions</h3> <div class="line"></div> <div class="item"> <a name="add"></a> <h4 class="func">add()</h4> <p>Adds a node to the tree.<br />Can only be called before the tree is drawn.</p> <p>id, pid and name are required.</p> <h4>Parameters</h4> <table class="files"> <tr> <th>Name</th> <th>Type</th> <th>Description</th> </tr> <tr> <td>id</td> <td>Number</td> <td>Unique identity number.</td> </tr> <tr> <td>pid</td> <td>Number</td> <td>Number refering to the parent node. The value for the root node has to be -1.</td> </tr> <tr> <td>name</td> <td>String</td> <td>Text label for the node.</td> </tr> <tr> <td>url</td> <td>String</td> <td>Url for the node.</td> </tr> <tr> <td>title</td> <td>String</td> <td>Title for the node.</td> </tr> <tr> <td>target</td> <td>String</td> <td>Target for the node.</td> </tr> <tr> <td>icon</td> <td>String</td> <td>Image file to use as the icon. Uses default if not specified.</td> </tr> <tr> <td>iconOpen</td> <td>String</td> <td>Image file to use as the open icon. Uses default if not specified.</td> </tr> <tr> <td>open</td> <td>Boolean</td> <td>Is the node open.</td> </tr> </table> <br /> <h4>Example</h4> <p><code>mytree.add(1, 0, 'My node', 'node.html', 'node title', 'mainframe', 'img/musicfolder.gif');</code></p> <br /> <a name="openall"></a> <h4 class="func">openAll()</h4> <p>Opens all the nodes.<br />Can be called before and after the tree is drawn.</p> <h4>Example</h4> <p><code>mytree.openAll();</code></p> <br /> <a name="closeall"></a> <h4 class="func">closeAll()</h4> <p>Closes all the nodes.<br />Can be called before and after the tree is drawn.</p> <h4>Example</h4> <p><code>mytree.closeAll();</code></p> <br /> <a name="opento"></a> <h4 class="func">openTo()</h4> <p>Opens the tree to a certain node and can also select the node.<br /> Can only be called after the tree is drawn.</p> <h4>Parameters</h4> <table class="files"> <tr> <th>Name</th> <th>Type</th> <th>Description</th> </tr> <tr> <td>id</td> <td>Number</td> <td>Identity number for the node.</td> </tr> <tr> <td>select</td> <td>Boolean</td> <td>Should the node be selected.</td> </tr> </table> <h4>Example</h4> <p><code>mytree.openTo(4, true);</code></p> </div> <a name="configuration"></a> <h3>Configuration</h3> <div class="line"></div> <div class="item"> <table class="files"> <tr> <th>Variable</th> <th>Type</th> <th>Default</th> <th>Description</th> </tr> <tr> <td>target</td> <td>String</td> <td>true</td> <td>Target for all the nodes.</td> </tr> <tr> <td>folderLinks</td> <td>Boolean</td> <td>true</td> <td>Should folders be links.</td> </tr> <tr> <td>useSelection</td> <td>Boolean</td> <td>true</td> <td>Nodes can be selected(highlighted).</td> </tr> <tr> <td>useCookies</td> <td>Boolean</td> <td>true</td> <td>The tree uses cookies to rember it's state.</td> </tr> <tr> <td>useLines</td> <td>Boolean</td> <td>true</td> <td>Tree is drawn with lines.</td> </tr> <tr> <td>useIcons</td> <td>Boolean</td> <td>true</td> <td>Tree is drawn with icons.</td> </tr> <tr> <td>useStatusText</td> <td>Boolean</td> <td>false</td> <td>Displays node names in the statusbar instead of the url.</td> </tr> <tr> <td>closeSameLevel</td> <td>Boolean</td> <td>false</td> <td>Only one node within a parent can be expanded at the same time. openAll() and closeAll() functions do not work when this is enabled.</td> </tr> <tr> <td>inOrder</td> <td>Boolean</td> <td>false</td> <td>If parent nodes are always added before children, setting this to true speeds up the tree.</td> </tr> </table> <h4>Example</h4> <p><code>mytree.config.target = "mytarget";</code></p> </div> </div> <div class="line"></div> <div id="copy"> <p class="right"><a href="http://validator.w3.org/check/referer">XHTML</a>, <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a></p> <p><a href="mailto:drop@destroydrop.com">©2002-2003 Geir Landrö</a></p> </div> </div> </div> </body> </html>

评论收藏

内容反馈