JSTREE操作

项目中需要动态显示树形菜单，开始使用jqueryTree，后来发现它的功能过于简单，不能满足我对菜单的动态添加，修改，删除等功能。

于是改用jsTree，这个插件可以控制在操作菜单前需要完成的功能和操作结束后需要完成的功能。

首先进行jsTree的初始化工作

[javascript]  view plain copy

1. $(function () {  
2. $("#demo")  
3.     .bind("before.jstree", function (e, data) {  
4.         $("#alog").append(data.func + "<br />");  
5.     })  
6.     .jstree({  
7.         "plugins" : [   
8.             "themes","json_data","ui","crrm","cookies","search","types","hotkeys"   
9.         ],  
10.   
11.         "json_data" : {   
12.             "ajax" : {  
13.                 type : "post",  
14.                 "url" : "/myapp/myappData.json",//异步请求数据  
15.                 "data" : function (n) {   
16.                     return {   
17.                           
18.                     };   
19.                 }  
20.             }  
21.         },  
22.         "types" : {  
23.             "max_depth" : -2,  
24.             "max_children" : -2,  
25.             "valid_children" : [ "drive" ],  
26.             "types" : {  
27.                 "default" : {  
28.                     "valid_children" : [ "default", "folder" ],  
29.                     "icon" : {  
30.                         "image" : "/images/jstree/folder.png"  
31.                     }  
32.                 }  
33.             }  
34.         },  
35.         "callback" : {        
36.                 onselect : function(node,tree_obj){//节点单击事件    
37.                 },    
38.             }, //end callback  
39.         "ui" : {  
40.             "initially_select" : [ "/zonda" ]  
41.         },  
42.         "core" : {   
43.             "initially_open" : [ "/zonda"]   
44.         }  
45.     })  

以上是初始化jsTre的代码，随便找一个类似的代码都可以。

1、下面比如我目前需要删除一个节点，但是删除节点之前我需要做一些操作，怎么办呢？

jsTree有个好方法，如下

[javascript]  view plain copy

1. .bind("before.jstree", function(e, data) {  
2.         if (data.func === "remove") {  
3.   
4. doSomething();  
5. })  

给jsTree绑定一个“before.jstree”时间，然后根据时间的不同类型来做相应的动作；

2、下面我要真正的删除节点了，这就需要下面的代码了

[javascript]  view plain copy

1. .bind("remove.jstree", function (e, data) {  
2. doSomething()  
3. }  

即绑定"remove.jstree"方法，然后调用我们相应的删除操作。

以上只是列出了这两种用法，它还有很多操作，比如对于"before.jstree"，可以判断创建、删除、重命名等。这个执行完成之后，可以调用真正的添加、删除、修改的功能了。

利用jstree可以完成很复杂的业务逻辑操作，不只对树形结构，还可以在页面中建立一些关联，把树形结构作为key，另外设一表单作为它的值，这样可以实现很强大的功能。厉害啊！