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了

<script type="text/javascript" src="js/\_lib/jquery.js"></script>  <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格式如下：

1//此段JSON
2	{
3		data:[{
4				  attr:{id:"1"},
5				  data:"省市列表",
6			  	  children:[
7						{
8							attr:{id:"01"},
9							data:"广东省珠海市" ,
10							children:[
11								   {
12									   attr:{id:"001"},
13									   data:"香洲区",
14									   children:[
15{attr:{id:"0001"},data:"夏美" },
16{attr:{id:"0002"},data:"光明街"}
17											  ] 
18								   }] },
19						{
20							attr:{id:"02"},
21							data:"广东省东莞市"
22							}]
23				  }]
24		}

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

1//右键创建事件
2	.bind("create.jstree", function (e, data) 
3	{		
4		//数据以POST方式发送
5		$.post("ajaxTree.action", 
6				{ 
7					//需要传递的参数
8					"ac" : "create_node", 
9					"parentid" : data.rslt.parent.attr("id").replace("node_",""), 
10					"nodename" : data.rslt.name
11				}, 
12				function(r) 
13				{
14					//操作结果回调
15					if(r.message=="success") 
16					{
17						$(data.rslt.obj).attr("id", "node_" + r.id);
18					}
19					//失败
20					else 
21					{
22						$.jstree.rollback(data.rlbk);
23					}
24				}
25			);
26		})
27//连续绑定多个事件
28.bind("remove.jstree", function (e, data) 
29{
30})
31.bind("rename.jstree", function (e, data) 
32{		
33}
34……

JQuery树插件JSTree的使用

评论区

相关推荐