将theme,lib,jquery-tree.js放于根目录下,这三个文件或文件夹之间的路径关系不要改变,如果要改变要进行相应的设置
data.jsp全部页面代码只需要下面一行
{data:"Fuck You!", state: "closed"}
test.jsp
<script type="text/javascript">
$(document).ready(function(){
$("#documentCatalog").tree({
data:{
type: "json",
async: true,
opts:{
method: "POST",
url: "http://localhost:8088/oa/DocumentCatalog/data.jsp"
}
},
ui:{
dots : true, // BOOL - dots or no dots
theme_name : "default"// if set to false no theme will be loaded
}
}
);
});
</script>
即可看到一个树,每一个树的内容都是data后面设置的内容,且这个树具有拖曳功能
分享到:
相关推荐
### 一、JsTree基本使用 1. **安装与引入** 在项目中使用JsTree,首先需要下载其库文件,可以从官方网站或者其他可信的源获取。然后在HTML文件中引入jQuery和JsTree的CSS及JS文件。确保jQuery库在JsTree之前加载,...
1. **jsTree基本使用**:了解如何引入jsTree库,设置基本配置项,以及初始化树型结构。这包括学习HTML结构、JavaScript代码和必要的CSS样式,确保jsTree能够正确显示在网页上。 2. **数据源与加载**:jsTree可以...
在项目中使用 jsTree,首先需要从其官方网站或者通过npm、yarn等包管理器下载最新版本。引入jsTree所需的JavaScript和CSS文件到HTML页面中,确保在使用前正确加载jQuery库,因为jsTree是基于jQuery构建的。 ```html...
**二、jsTree基本使用** 1. **引入依赖**:首先在HTML文档中引入jQuery库和jsTree的CSS、JS文件,确保它们按照正确的顺序加载。 2. **准备容器**:在HTML中创建一个空的`<div>`作为jsTree的容器。 3. **初始化js...
**JsTree 实例使用详解** JsTree 是一个强大的JavaScript库,专为构建交互式的树状视图而设计。它在Web开发中广泛应用于文件管理、菜单系统、组织结构展示等多种场景。JsTree 提供了丰富的功能,如动态加载、节点...
**一、jsTree 的基本使用** 1. **引入 jsTree** 在你的 HTML 文件中,你需要引入 jsTree 的核心 CSS 和 JavaScript 文件。通常,这些文件可以从 jsTree 的官方仓库或者 CDN 服务获取。例如: ```html ...
1. **jstree基本使用**:首先,你需要在HTML文件中引入jstree的CSS和JavaScript文件。然后,准备一个HTML元素作为树的容器,并提供初始数据。通过调用`.jstree()`方法,将这个元素转化为jstree实例。 2. **配置选项...
总结来说,jsTree提供了全面的API来处理树形数据,无论是在基本的操作,如添加、删除和移动节点,还是更复杂的事件处理和动态加载数据,都具有灵活的接口。结合jsTree的中文API文档,开发者可以轻松地在项目中集成和...
**jsTree基本例子** jsTree是一款强大的JavaScript库,专门用于创建、操作和展示具有层级结构的数据,例如构建可交互的目录树或文件系统浏览器。它提供了丰富的API和各种主题,可以方便地集成到任何Web应用中,提供...
**jsTree.v.1.0中文文档** ...通过阅读这份jsTree v.1.0中文文档,开发者不仅能掌握jsTree的基本用法,还能深入理解其内部机制,从而灵活运用到实际项目中。无论是初学者还是有经验的开发者,都能从中受益。
在使用 jsTree 时,首先需要对元素进行初始化。以下是一个简单的初始化示例: ```javascript $(function () { $("#demo") .bind("before.jstree", function (e, data) { $("#alog").append(data.func + " ...
**二、jstree基本使用** 1. **引入库**:首先在HTML文件中引入`jstree`的CSS和JS文件。 2. **准备容器**:创建一个空的HTML元素作为树的容器,如`<div id="tree"></div>`。 3. **初始化jstree**:使用JavaScript...
一、js Tree的基本概念 js Tree是一种基于JavaScript的开源库,用于创建交互式的树状数据结构。它允许用户通过拖放、搜索、展开/折叠节点等功能来操作数据。在移动端,js Tree需要适应更小的屏幕和触摸操作,因此...
总的来说,jsTree 是一个功能强大、易于使用的 JavaScript 库,尤其适合构建动态的、交互式的树状数据视图。无论你是前端开发者还是需要在网页上展示层级结构数据的用户,jsTree 都能成为你的得力工具。
jsTree 的基本使用** jsTree 首先需要在 HTML 页面中引入相关的 CSS 和 JS 文件。你可以通过 CDN 或者本地文件引用。基础的 HTML 结构通常包含一个 `div` 元素作为 jsTree 的容器,例如: ```html <div id="js...
插件扩展了jstree的基本功能,例如搜索、拖放、检查节点等。 5. **$.jstree.plugins**:这个内部使用的对象存储了所有已加载的jstree插件,便于管理和使用。 6. **$.jstree.create**:此函数用于创建一个新的js...
jstree基本概念 - **节点(Nodes)**:树形结构的基本单元,可以包含子节点。 - **父节点(Parent Node)**:拥有子节点的节点。 - **子节点(Child Node)**:属于其他节点的子级。 - **叶子节点(Leaf Node)**...
1. **节点 (Nodes)**:jsTree 中的基本元素,可以是树的根节点或子节点。每个节点包含文本、ID、图标等属性,并可拥有子节点。 2. **容器 (Container)**:通常是一个 HTML 元素,如 `div`,用于承载整个树结构。 3...
**jstree用法大集合** ...总的来说,这个"jstree用法大集合"是一个宝贵的资源,涵盖了`jstree`的各种应用场景和使用技巧。通过学习和实践这些示例,你可以熟练掌握`jstree`,并在实际项目中灵活运用。
jsTree的基本使用 jsTree的核心在于HTML元素的选择和初始化。在HTML结构中,你需要一个无序列表(`<ul>`)或有序列表(`<ol>`)来承载树节点。然后通过JavaScript引入jsTree库,并调用初始化函数,将这个列表转换...