`
herestay
  • 浏览: 35971 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

JQuery树插件JSTree的使用

阅读更多

JSTREE简介:

JSTREE是一款基于JQUERY的树形插件,其功能相当强大,尤其是其右键菜单,很轻松地就能实现节点的增加节点、重命名节电、删除节点、复制节点、剪切节点等操作。

 

使用JSTREE:

1.首先,要去JSTREE下载插件包: http://www.jstree.com/ 最新版本。

插件包包含四个文件夹,一个JSTREE主文件JS

_demo 相关案例,存放了用JSTREE做的几个例子

_docs JSTREE说明文档,里面有相关使用说明及API

_lib JSTREE插件JS库

Themes JSTREE主题包

jquery.jstree.js JSTREE主JS库

 

 

我们要用到的是 _lib、Themes、jquery.jstree.js 把这三个文件夹拷到我们工程的JS目录下(只是示例,拷贝到随意地方,只要引用正确即可)

 

2.接下来就可以使用JSTREE了

<!-- JQUERY 主要JS库-->

<script type="text/javascript" src="js/_lib/jquery.js"></script>

<!-- JSTREE 主要JS库-->

<script type="text/javascript" src="js/_lib/jquery.cookie.js"></script>

<script type="text/javascript" src="js/_lib/jquery.hotkeys.js"></script>

<script type="text/javascript" src="js/_jquery.jstree.js"></script>

 

 

 

插件选择:
"plugins" : [ "themes", "json_data","ui", "crrm", "cookies", "dnd","search", "types", "hotkeys","contextmenu" ]

每个元素代表一类插件,比如说要显示右键菜单,那么把“contextmenu”加入插件集合即可,反之删除此项,右键菜单将不再显示。

 

 

 

 

 

数据来源:JSTREE提供了三种数据

1、HTML:预定的HTML列表格式

2、JSON:JOSN格式文件或字符串

3、XML:来源于XML文件

这里我们使用JSON作为数据承载方式,JSON格式如下:

 

 

//此段JSON
	{
		data:[{
				  attr:{id:"1"},
				  data:"省市列表",
			  	  children:[
						{
							attr:{id:"01"},
							data:"广东省珠海市" ,
							children:[
								   {
									   attr:{id:"001"},
									   data:"香洲区",
									   children:[
{attr:{id:"0001"},data:"夏美" },
{attr:{id:"0002"},data:"光明街"}
											  ] 
								   }] },
						{
							attr:{id:"02"},
							data:"广东省东莞市"
							}]
				  }]
		}

 

绑定事件:
JSTREE提供右键操作的事件绑定,创建节点(create.jstree) ,移除节点(remove.jstree),重命名节点(rename.jstree),拖拽剪切粘贴(move_node.jstree)

 

 

//右键创建事件
	.bind("create.jstree", function (e, data) 
	{		
		//数据以POST方式发送
		$.post("ajaxTree.action", 
				{ 
					//需要传递的参数
					"ac" : "create_node", 
					"parentid" : data.rslt.parent.attr("id").replace("node_",""), 
					"nodename" : data.rslt.name
				}, 
				function(r) 
				{
					//操作结果回调
					if(r.message=="success") 
					{
						$(data.rslt.obj).attr("id", "node_" + r.id);
					}
					//失败
					else 
					{
						$.jstree.rollback(data.rlbk);
					}
				}
			);
		})
//连续绑定多个事件
.bind("remove.jstree", function (e, data) 
{
})
.bind("rename.jstree", function (e, data) 
{		
}
……



分享到:
评论

相关推荐

    jQuery树插件演示族谱Family tree和日程安排

    2. 插件选择:有许多jQuery树插件可供选择,如jqTree、jstree、treeview等。它们都有不同的特性和配置选项,选择时应考虑项目需求和性能。 3. 渲染树形结构:利用插件提供的API,将JSON数据转换为树形结构,并渲染到...

    扩展了一棵jquery的树插件SimpleTree(jquery.simple.tree.js),支持json数据,checkbox树,以及异步加载,

    `jQuery.simple.tree.js` 是`jQuery SimpleTree`的核心代码文件,通过阅读源码,你可以了解到插件是如何解析JSON数据,渲染树结构,以及处理异步加载和复选框事件的。在`iteye`博客上发布的链接...

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

    **基于jQuery的树形结构JsTree使用心得** JsTree是一款基于JavaScript的开源库,它能够帮助开发者轻松地在网页上创建交互式的树形结构。在本文中,我们将深入探讨如何利用jQuery与JsTree来构建这样的功能,同时分享...

    jstree-实用的jQuery目录树插件

    **jstree:jQuery的强力目录树插件** 在网页开发中,为了更好地展示层级结构的数据,目录树组件是不可或缺的工具。jstree是一款基于jQuery的开源插件,它提供了一种简单、灵活的方式来创建交互式的目录树结构。这款...

    jquery表格树插件GridTree懒加载版本(开源,含demo)

    1. 引入jQuery库和GridTree插件的JS与CSS文件。 2. 初始化表格树,设置必要的配置项,如数据源URL、懒加载参数等。 3. 调用插件提供的方法,如`gridtree.init()`启动表格树,`gridtree.expandNode(nodeId)`展开指定...

    jsTree树控件(基于jQuery, 超强悍)

    **jsTree:基于jQuery的超强大树形控件** jsTree是一款高度可定制的JavaScript库,专注于构建交互式的树形结构。它完全基于jQuery,因此能够无缝地融入任何已使用jQuery的项目中,同时支持所有主流浏览器,包括...

    jQuery jsTree大集合

    jsTree是一款基于jQuery的开源树形插件,它提供了丰富的功能和自定义选项,可以轻松实现网页中的可交互、动态展示的树结构。jsTree支持HTML、JSON等多种数据源,并且提供了搜索、拖放、上下文菜单、多选、异步加载等...

    基于Jquery的JSTree实例

    JSTree是一款强大的基于JavaScript的树型视图库,它能够方便地在网页中构建和操作交互式的树结构。JSTree与jQuery库结合,提供了丰富的API和多种可配置选项,使得开发者能够轻松实现自定义功能,如拖放操作、搜索、...

    jsontree (jquery.treeview.js) jQuery插件版 treeview1.0

    jsontree (jquery.treeview.js) jQuery插件版 treeview1.0jsontree (jquery.treeview.js) jQuery插件版 treeview1.0jsontree (jquery.treeview.js) jQuery插件版 treeview1.0jsontree (jquery.treeview.js) jQuery...

    jstree是一款非常实用的jQuery目录树插件

    jstree是一款基于jQuery的开源目录树插件,它以其强大的功能和灵活性在Web开发领域备受青睐。该插件允许开发者轻松地在网页上创建交互式的、可自定义的树状视图,适用于展现层级结构的数据,如文件系统、组织结构或...

    jQueryzTree JSTree 数组大全.rar

    在Web开发中,jQueryzTree和JSTree是两个广泛使用的JavaScript库,它们主要用于构建交互式的树形结构,如导航菜单、组织架构图等。这两个库都提供了丰富的功能和高度的自定义性,其中,对数组的操作是实现这些功能的...

    jQuery的Tree控件 jstree

    jQuery的jstree插件是一款强大的、可定制化的树形视图库,它能够轻松地将HTML元素转换为交互式的树结构。本文将深入探讨jstree的核心特性、配置选项、API使用以及实际应用案例。 1. **核心特性** - **多用途**:js...

    jsTree中文文档

    引入jsTree所需的JavaScript和CSS文件到HTML页面中,确保在使用前正确加载jQuery库,因为jsTree是基于jQuery构建的。 ```html &lt;link rel="stylesheet" href="jstree/dist/themes/default/style.css" /&gt; ...

    jquery jstree

    总的来说,`jQuery jsTree` 是一个强大且易用的树形视图插件,适用于需要展示和操作树状数据的项目。它的灵活性和丰富的功能使其成为开发者的首选工具之一。通过熟练掌握jsTree的使用,可以提升项目的用户体验,实现...

    jsTreeSelect jquery 树形下拉菜单

    - 使用jQuery选择下拉菜单元素,并调用`.jstree()`方法初始化树形结构。 - 配置jsTree选项,例如设置主题、启用多选或单选、定义异步加载等。 ### 3. 自定义配置和扩展 jsTreeSelect允许通过配置对象进行高度定制...

    一个jquery tree插件

    jQuery Tree插件有很多实现,例如`jstree`,这是一个非常流行的选择,它提供了丰富的功能和良好的社区支持。但也有其他类似插件,如`jQuery UI Treeview`、`EasyTree`等,开发者可以根据项目需求和自身喜好进行选择...

    jstree目录树控件

    3. **初始化jsTree**:使用`$(selector).jstree(options)`方法初始化树控件,`selector`是树容器的选择器,`options`是一个包含配置项的对象,用于设置初始状态、加载数据的方式、使用的插件等。 4. **处理事件**:...

Global site tag (gtag.js) - Google Analytics