本文主要内容:
一、jsTree的基本使用方法;
二、按需装载子节点,即每次展开某节点时,才去服务器装载其子节点。
jsTree是基于jQuery的一个树形插件,该项目主页:http://www.jstree.com/
本文使用版本为0.9.9a,主要参考文档在下载包里的documentation.html文件。
一、jsTree的基本使用方法:
1. 在页面导入必要的库文件:
基本的使用只需要jquery.js和jquery.tree.js两个文件,都在jsTree的下载包里,不同版本的jsTree需要导入的库文件可能不同。
2. 在页面需要显示树的地方:
<div id="myTree"></div>
3. 生成树的js方法:
$("#myTree").tree({
data : {
type : "json",
url : "getChildren.do"
}
});
这是最简单的写法,更多配置可参考documentation.html里的Configuration段。
其中type指返回的数据类型,这里设置为json,所以url请求返回的数据必需是jsTree约定的json格式,对于每个节点最基本的格式如下:
{
attributes: { id : "node_identificator", some-other-attribute : "attribute_value" },
data: "node_title",
// Properties below are only used for NON-leaf nodes
state: "closed", // or "open"
children: [ /* an array of child nodes objects */ ]
}
attributes里为自定义属性,data为节点显示的文本,state值为closed时,节点前面有表示节点可以被展开的标识。还有其它写法可参考documentation.html里的Datastores段。
二、按需装载子节点:
在上面基本使用方法的第3点里提到更多配置可参考documentation.html里的Configuration段,其中有一个callback配置项,按需装载子节点可以通过这里的onopen事件触发,即当展开节点时。在上面第3点的代码里加上callback配置项如下:
$("#myTree").tree({
data : {
type : "json",
async : true,
url : "getChildren.do"
},
callback : {
onopen : function (node, tree_obj) {
if (tree_obj.children(node).length == 0) {
$.getJSON('getChildren.do, {'id' : node.id}, function(data) {
$.each(data, function(entryIndex, entry) {
tree_obj.create(entry, node, entryIndex + 1);
});
});
}
return true;
}
}
});
其中, $.getJSON和$.each方法是jQuery中的方法,children和create是jsTree的方法,在documentation.html里的API段里可找到它们的使用说明。上面代码中依次出现的参数,node是要展开的节点对象,tree_obj是整个树对象,data是请求返回的json格式数据,依然是要符合之前提到的约定格式。entry是遍历返回的节点数组时的当前节点,entryIndex是其在数组中的索引。
分享到:
相关推荐
//JS实现treeview中选中父节点,子节点也选中,如果子节点全部选中,自动选中父节点 //仅支持TreeView //调用方法 TreeView.Attributes.Add("onclick", "OnTreeNodeChecked()");
引入jsTree所需的JavaScript和CSS文件到HTML页面中,确保在使用前正确加载jQuery库,因为jsTree是基于jQuery构建的。 ```html <link rel="stylesheet" href="jstree/dist/themes/default/style.css" /> ...
**JSTree:高效处理大数据量的JavaScript树形菜单组件** 在Web开发中,树形菜单是一种常见的数据展示形式,用于组织和展示层次结构的数据。...掌握JSTree的使用,将有助于提升项目的交互体验和开发效率。
**一、jsTree 的基本使用** 1. **引入 jsTree** 在你的 HTML 文件中,你需要引入 jsTree 的核心 CSS 和 JavaScript 文件。通常,这些文件可以从 jsTree 的官方仓库或者 CDN 服务获取。例如: ```html ...
动态加载是 jsTree 的核心特性之一,它允许在用户滚动或展开树节点时按需加载数据,而不是一次性加载所有数据。这种机制对于处理大量数据特别有用,因为它减少了初始页面加载时间,提高了用户体验。通过设置适当的...
在本文中,我们将深入探讨jsTree的API和其在实际应用中的使用方法。 ### 1. 初始化jsTree jsTree的初始化是通过调用`$().jstree()`函数来完成的。你需要指定一些配置选项,例如核心、插件、主题等,来定制你的树...
用户可以一次性加载所有节点,或者仅加载顶层节点,后续的子节点在用户交互时按需从服务器获取,这样既节省了带宽,又提高了页面响应速度。 3. **丰富的API和事件**:jsTree提供了一套完整的API接口,允许开发者对...
- **树状结构**:jsTree通过节点和层级关系来呈现数据,每个节点可以有子节点,形成树形层次。 - **核心功能**:包括创建、删除、移动、展开/折叠节点,以及节点的选中、拖放操作。 - **插件系统**:jsTree通过...
jsTree支持动态加载数据,这意味着当用户展开一个节点时,其子节点才会被请求并显示。这种机制可以提高页面加载速度,特别是在处理大量数据时。动态加载通常与服务器端接口结合使用,通过Ajax请求获取子节点数据。 ...
**JsTree 实例使用详解** JsTree 是一个强大的JavaScript库,专为构建交互式的树状视图而设计。它在Web开发中广泛应用于文件管理、菜单系统、组织结构展示等多种场景。JsTree 提供了丰富的功能,如动态加载、节点...
3. **API 操作(API Operations)**:JsTree 提供了丰富的 API,如 `get_node` 获取节点信息,`open_node` 展开节点,`select_node` 选择节点等。 4. **主题定制(Theming)**:JsTree 支持自定义主题,你可以调整...
本篇文章将深入探讨如何使用JsTree创建一个静态的例子。 首先,我们需要从JsTree的官方网站下载最新版本的库文件。这通常包括`jstree.js`(核心脚本)、`jstree.css`(样式表)以及可能的插件和主题文件。确保将...
JStree 提供了多个插件,如 `checkbox`, `contextmenu`, `dnd`, `search` 等,可以按需启用。每个插件都有丰富的配置选项,以定制其行为。 例如,启用 `checkbox` 插件: ```javascript 'checkbox': { 'three_...
可以使用 AJAX 请求从服务器获取 JSON 数据,然后用这些数据填充 jsTree。例如,使用 jQuery 的 `ajax` 方法: ```javascript $.ajax({ url: 'your/java/service', type: 'GET', dataType: 'json', success: ...
5. **异步加载**:可以实现按需加载子节点,提高页面性能,尤其在处理大量数据时。 6. **上下文菜单**:可以自定义右键点击节点时出现的菜单项,实现更多操作。 7. **事件系统**:提供了丰富的事件机制,如`select_...
jsTree 支持多种功能,包括动态加载、异步数据获取、节点的增删改查、搜索、拖放操作以及自定义主题和类型。 **初始化 jsTree** 在使用 jsTree 时,首先需要对元素进行初始化。以下是一个简单的初始化示例: ```...
- **异步加载**:当节点数据量大时,可以通过异步方式按需加载,提高页面性能。 - **可编辑节点**:允许用户编辑节点的文本。 - **搜索功能**:添加搜索插件,让用户快速查找树中的特定节点。 - **多选模式**:启用...
4. 可访问性:考虑到移动设备上的用户可能使用屏幕阅读器或其他辅助技术,js Tree应遵循Web内容无障碍指南(WCAG),确保所有功能对残障人士同样友好。 四、实际应用与案例 在实际项目中,手机端js Tree可以应用于...
1. **节点 (Nodes)**:jsTree 中的基本元素,可以是树的根节点或子节点。每个节点包含文本、ID、图标等属性,并可拥有子节点。 2. **容器 (Container)**:通常是一个 HTML 元素,如 `div`,用于承载整个树结构。 3...