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.

 

<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/