`

JSTREE的基本使用

    博客分类:
  • OA
阅读更多

将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后面设置的内容,且这个树具有拖曳功能

分享到:
评论

相关推荐

    基于jquery的树形结构JsTree 使用心得

    ### 一、JsTree基本使用 1. **安装与引入** 在项目中使用JsTree,首先需要下载其库文件,可以从官方网站或者其他可信的源获取。然后在HTML文件中引入jQuery和JsTree的CSS及JS文件。确保jQuery库在JsTree之前加载,...

    jsTree大集合学习资料

    1. **jsTree基本使用**:了解如何引入jsTree库,设置基本配置项,以及初始化树型结构。这包括学习HTML结构、JavaScript代码和必要的CSS样式,确保jsTree能够正确显示在网页上。 2. **数据源与加载**:jsTree可以...

    jsTree中文文档

    在项目中使用 jsTree,首先需要从其官方网站或者通过npm、yarn等包管理器下载最新版本。引入jsTree所需的JavaScript和CSS文件到HTML页面中,确保在使用前正确加载jQuery库,因为jsTree是基于jQuery构建的。 ```html...

    jQuery jsTree大集合

    **二、jsTree基本使用** 1. **引入依赖**:首先在HTML文档中引入jQuery库和jsTree的CSS、JS文件,确保它们按照正确的顺序加载。 2. **准备容器**:在HTML中创建一个空的`&lt;div&gt;`作为jsTree的容器。 3. **初始化js...

    JsTree 实例使用

    **JsTree 实例使用详解** JsTree 是一个强大的JavaScript库,专为构建交互式的树状视图而设计。它在Web开发中广泛应用于文件管理、菜单系统、组织结构展示等多种场景。JsTree 提供了丰富的功能,如动态加载、节点...

    使用jsTree实现js树形结构

    **一、jsTree 的基本使用** 1. **引入 jsTree** 在你的 HTML 文件中,你需要引入 jsTree 的核心 CSS 和 JavaScript 文件。通常,这些文件可以从 jsTree 的官方仓库或者 CDN 服务获取。例如: ```html ...

    js tree,checkbox tree

    1. **jstree基本使用**:首先,你需要在HTML文件中引入jstree的CSS和JavaScript文件。然后,准备一个HTML元素作为树的容器,并提供初始数据。通过调用`.jstree()`方法,将这个元素转化为jstree实例。 2. **配置选项...

    jsTree中文api

    总结来说,jsTree提供了全面的API来处理树形数据,无论是在基本的操作,如添加、删除和移动节点,还是更复杂的事件处理和动态加载数据,都具有灵活的接口。结合jsTree的中文API文档,开发者可以轻松地在项目中集成和...

    jsTree基本例子

    **jsTree基本例子** jsTree是一款强大的JavaScript库,专门用于创建、操作和展示具有层级结构的数据,例如构建可交互的目录树或文件系统浏览器。它提供了丰富的API和各种主题,可以方便地集成到任何Web应用中,提供...

    jsTree.v.1.0中文文档

    **jsTree.v.1.0中文文档** ...通过阅读这份jsTree v.1.0中文文档,开发者不仅能掌握jsTree的基本用法,还能深入理解其内部机制,从而灵活运用到实际项目中。无论是初学者还是有经验的开发者,都能从中受益。

    jsTree操作 jsTree插件简介

    在使用 jsTree 时,首先需要对元素进行初始化。以下是一个简单的初始化示例: ```javascript $(function () { $("#demo") .bind("before.jstree", function (e, data) { $("#alog").append(data.func + " ...

    jstree插件包和DMEO

    **二、jstree基本使用** 1. **引入库**:首先在HTML文件中引入`jstree`的CSS和JS文件。 2. **准备容器**:创建一个空的HTML元素作为树的容器,如`&lt;div id="tree"&gt;&lt;/div&gt;`。 3. **初始化jstree**:使用JavaScript...

    手机端js tree

    一、js Tree的基本概念 js Tree是一种基于JavaScript的开源库,用于创建交互式的树状数据结构。它允许用户通过拖放、搜索、展开/折叠节点等功能来操作数据。在移动端,js Tree需要适应更小的屏幕和触摸操作,因此...

    jsTree 很好用的动态加载数

    总的来说,jsTree 是一个功能强大、易于使用的 JavaScript 库,尤其适合构建动态的、交互式的树状数据视图。无论你是前端开发者还是需要在网页上展示层级结构数据的用户,jsTree 都能成为你的得力工具。

    jsTree JAVA例子

    jsTree 的基本使用** jsTree 首先需要在 HTML 页面中引入相关的 CSS 和 JS 文件。你可以通过 CDN 或者本地文件引用。基础的 HTML 结构通常包含一个 `div` 元素作为 jsTree 的容器,例如: ```html &lt;div id="js...

    jstree中文文档.doc

    插件扩展了jstree的基本功能,例如搜索、拖放、检查节点等。 5. **$.jstree.plugins**:这个内部使用的对象存储了所有已加载的jstree插件,便于管理和使用。 6. **$.jstree.create**:此函数用于创建一个新的js...

    jsTree动态tree

    jstree基本概念 - **节点(Nodes)**:树形结构的基本单元,可以包含子节点。 - **父节点(Parent Node)**:拥有子节点的节点。 - **子节点(Child Node)**:属于其他节点的子级。 - **叶子节点(Leaf Node)**...

    jsTree实例,jsTree实例

    1. **节点 (Nodes)**:jsTree 中的基本元素,可以是树的根节点或子节点。每个节点包含文本、ID、图标等属性,并可拥有子节点。 2. **容器 (Container)**:通常是一个 HTML 元素,如 `div`,用于承载整个树结构。 3...

    jstree用法大集合

    **jstree用法大集合** ...总的来说,这个"jstree用法大集合"是一个宝贵的资源,涵盖了`jstree`的各种应用场景和使用技巧。通过学习和实践这些示例,你可以熟练掌握`jstree`,并在实际项目中灵活运用。

    jsTree树形菜单

    jsTree的基本使用 jsTree的核心在于HTML元素的选择和初始化。在HTML结构中,你需要一个无序列表(`&lt;ul&gt;`)或有序列表(`&lt;ol&gt;`)来承载树节点。然后通过JavaScript引入jsTree库,并调用初始化函数,将这个列表转换...

Global site tag (gtag.js) - Google Analytics