jstreejavascript资源-CSDN文库

共24个文件

gif：20个

html：2个

js：1个

需积分: 9 131 浏览量 2008-11-19 13:10:24 上传评论收藏 14KB RAR 举报

JavaScript Tree，通常缩写为`jstree`，是一个基于JavaScript的开源库，用于创建、操作和展示HTML页面上的树状结构。这个库非常适合在Web应用程序中构建可交互的目录结构，例如文件管理系统、组织架构图或者层级关系的导航菜单。`jstree`提供了丰富的功能，包括节点的拖放、搜索、上下文菜单、多选、分层展开/折叠等，同时支持AJAX数据加载，可以轻松地与后端服务器进行数据交互。在`jstree`中，你可以通过JSON或HTML数据源来创建树结构。JSON数据源允许你提供一个包含节点信息的对象数组，每个对象代表树中的一个节点。HTML数据源则允许直接从HTML元素构建树结构，这对于已经存在的DOM结构非常有用。在学习`jstree`时，首先需要理解其基本配置项和API。配置项如`core.data`用于设置数据源，`plugins`定义你希望使用的插件，如`checkbox`（复选框）或`contextmenu`（上下文菜单）。API函数如`.jstree(true).get_selected()`用于获取当前选中的节点，`.jstree('create_node', parent, obj, pos, callback)`用于在指定位置创建新节点。 `dtree`可能是指`jstree`的一个示例或者演示项目，它可能包含了一个预设的树结构、相关的CSS样式和JavaScript代码，用于展示如何使用`jstree`库。通过分析`dtree`的代码，我们可以学习到如何初始化`jstree`，如何处理事件，以及如何自定义节点的样式和行为。学习`jstree`时，你应该关注以下几点： 1. **数据结构**：理解如何定义树节点的数据结构，包括父节点、子节点的关系。 2. **配置项**：了解所有可用的配置选项，以便根据需求定制功能。 3. **API**：掌握核心API的使用，如操作节点、获取节点信息、触发事件等。 4. **插件**：学习`jstree`内置的插件，如搜索、拖放、分页等，以及如何启用和配置它们。 5. **事件处理**：学习如何监听和响应用户交互，如点击节点、拖放操作等。 6. **样式自定义**：了解如何通过CSS修改`jstree`的外观，使其与你的网站设计保持一致。 7. **性能优化**：当数据量大时，学习如何通过异步加载、缓存策略等手段提高性能。 `jstree`是一个强大且灵活的工具，能够帮助开发者在Web应用中构建丰富的树形界面。通过深入学习和实践，你将能够熟练掌握这个库，并在项目中充分发挥其潜力。

资源推荐

资源详情

资源评论

收起资源包目录

dtree.rar （24个子文件）

dtree

api.html 5KB

example01.html 2KB

dtree.js 12KB

img

line.gif 66B

plusbottom.gif 88B

join.gif 69B

musicfolder.gif 633B

folderopen.gif 376B

plus.gif 89B

minus.gif 86B

imgfolder.gif 622B

cd.gif 239B

page.gif 582B

trash.gif 1KB

base.gif 1KB

nolines_plus.gif 870B

joinbottom.gif 66B

empty.gif 62B

nolines_minus.gif 861B

minusbottom.gif 85B

folder.gif 372B

question.gif 1KB

globe.gif 1KB

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>

评论收藏

内容反馈