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.
Html代码  
<script type="text/javascript" src="./_lib/jquery.js"></script>  
<script type="text/javascript" src="./jquery.jstree.js"></script>  

<script type="text/javascript" src="./_lib/jquery.js"></script>
<script type="text/javascript" src="./jquery.jstree.js"></script>2.
Js代码  
$(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(); })   
    ;   
});  

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

自从用了 jquery ztree 后，就不再用 jstree 了

哥一直都是自己写tree，比那好用多了，想要什么功能就有什么功能...