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了

插件选择：
"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) 
{        
}
……