JQuery树插件JSTree的使用

zfjdoreen 2012-06-19

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

相关推荐