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