JsTree Demo view

JsTree Demo

Version: jstree pre 1.0 stable

Old versions:  http://code.google.com/p/jstree/downloads/list

Add a demo for jstree in demo/index.html

Integrate the usage of metadata, click the node event ,attrs,toggle nodes and ajax json in jstree

Changed apple theme and classic theme background fixed for in ie6.

1.

 

Html代码  

1. <script type="text/javascript" src="./_lib/jquery.js"></script>  
2. <script type="text/javascript" src="./jquery.jstree.js"></script>  

 

2.

 

Js代码  

1. $(function () {  
2.     $.ajaxSetup({cache:false});//ajax request don't use the cache  
3. $("#jsonDemo").jstree({   
4.         // List of active plugins  
5.         "plugins" : [   
6.             "themes","json_data", "ui"  
7.         ],  
8.         // I usually configure the plugin that handles the data first  
9.         // This example uses JSON as it is most common  
10.         "json_data" : {   
11.             "data" : [{"attr":{"id":"1204","isLast":"false","name":"A Node"},  
12.                           "data":"A Node",  
13.                          "metadata":{"id":"1204","isLast":"false","name":"A Node"},  
14.                           "state":"closed"},  
15.                       {"attr":{"id":"1205","isLast":"true","name":"B Node"},  
16.                         "data":"B Node",  
17.                         "metadata":{"id":"1205","isLast":"true","name":"B Node"},  
18.                         "state":"close"}  
19.                      ],  
20.             "ajax" : { "url" : "./_demo/_tree_json.json",  
21.                              "data": function (n){  
22.                                 return{  
23.                                     //set the url request param,multi param separate by ,  
24.                                         "parentId" : n.attr ? n.attr("id") : "null",  
25.                                         "name":  n.attr ? n.attr("name") : "null"  
26.                                 };  
27.                         }  
28.              }  
29.         },    
30.        "themes" : {  
31.              "theme" : "classic", //apple,default,if in ie6 recommented you use classic  
32.              "dots" : true,  
33.              "icons" : true  
34.        }  
35.     })  
36.     .bind("select_node.jstree",function(event,data){    
37.             if("true" == data.rslt.obj.attr("isLast")){   
38.                  //get the attrs data you set in the attrs field;  
39.                 alert(data.rslt.obj.attr("id")+data.rslt.obj.attr("isLast"));  
40.                 //you can do something here...  
41.             }else{  
42.                 //toggle node refer to the id setted in the metadata  
43.                 //get the metadata id field value : jQuery.data(data.rslt.obj[0], "id")；  
44.                 //The metadata id value should be different to each other !!!  
45.                 //otherwise, the toggle_node will work incorrect !!!  
46.                 $("#jsonDemo").jstree("toggle_node","#"+jQuery.data(data.rslt.obj[0], "id"));  
47.             }      
48.     })  
49.     // prevent the default event of the link   
50.     .delegate("a", "click", function (event, data) { event.preventDefault(); })  
51.     ;  
52. });  

demo page:http://johntang.github.com/JsTree/

Integrate demo page: http://johntang.github.com/JsTree/demo.html

Jstree demo page: http://johntang.github.com/JsTree/_demo/