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) 
{		
}
……