JsTree Demo
Version: jstree pre 1.0 stable
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/
