Jstree Demo

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.

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

 

2.

 $(function () {
     $.ajaxSetup({cache:false});//ajax request don't use the cache
 $("#jsonDemo").jstree({
         // List of active plugins
         "plugins" : [
             "themes","json_data", "ui"
         ],
         // I usually configure the plugin that handles the data first
         // This example uses JSON as it is most common
         "json_data" : {
             "data" : [{"attr":{"id":"1204","isLast":"false","name":"A Node"},
                           "data":"A Node",
                          "metadata":{"id":"1204","isLast":"false","name":"A Node"},
                           "state":"closed"},
                       {"attr":{"id":"1205","isLast":"true","name":"B Node"},
                         "data":"B Node",
                         "metadata":{"id":"1205","isLast":"true","name":"B Node"},
                         "state":"close"}
                      ],
             "ajax" : { "url" : "./_demo/_tree_json.json",
                              "data": function (n){
                                 return{
                                     //set the url request param,multi param separate by ,
                                         "parentId" : n.attr ? n.attr("id") : "null",
                                         "name":  n.attr ? n.attr("name") : "null"
                                 };
                         }
              }
         },
        "themes" : {
              "theme" : "classic", //apple,default,if in ie6 recommented you use classic
              "dots" : true,
              "icons" : true
        }
     })
     .bind("select_node.jstree",function(event,data){
             if("true" == data.rslt.obj.attr("isLast")){
                  //get the attrs data you set in the attrs field;
                 alert(data.rslt.obj.attr("id")+data.rslt.obj.attr("isLast"));
                 //you can do something here...
             }else{
                 //toggle node refer to the id setted in the metadata
                 //get the metadata id field value : jQuery.data(data.rslt.obj[0], "id")；
                 //The metadata id value should be different to each other !!!
                 //otherwise, the toggle_node will work incorrect !!!
                 $("#jsonDemo").jstree("toggle_node","#"+jQuery.data(data.rslt.obj[0], "id"));
             }
     })
     // prevent the default event of the link
     .delegate("a", "click", function (event, data) { event.preventDefault(); })
     ;
 });

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/