最近在项目中用到了jquery jstree ，在此做下总结，引入
<script type="text/javascript" src="${ctx }/js/jQuery/jquery.js"></script>
<script type="text/javascript" src="${ctx }/js/jQuery/jstree/jquery.jstree.js"></script>
jquery jstree 的基本用法可以参考官网demo : http://www.jstree.com/
官网的例子每次加载数据都是一次性全部加载，当数据节点较多时，会造成性能问题。能不能采用按需加载呢，
原始ajax例子：
"json_data" : {
$(target).jstree({
"json_data" : {
// This tree is ajax enabled - as this is most common, and maybe a bit more complex
// All the options are almost the same as jQuery's AJAX (read the docs)
"ajax" : {
// the URL to fetch the data
"url" : "/static/v.1.0pre/_demo/server.php",
// the `data` function is executed in the instance's scope
// the parameter is the node being loaded
// (may be -1, 0, or undefined when loading the root nodes)
"data" : function (n) {
// the result is fed to the AJAX request `data` option
return {
"operation" : "get_children",
"id" : n.attr ? n.attr("id").replace("node_","") : 1
};
}
}
}
});
按需加载，即点击父节点后，再加载子节点数据
"json_data_on_demand" : {
"ajax" : {
"url" : function(node){
var nodeId = "";
var url = "";
if(node==-1){ //如果是父节点，则返回-1
url = "../data/navigator-catalog!get.action?parentid="+parentId;
}
else { //否则，即是子节点
nodeId = node.attr('id');
url = "../data/navigator-catalog!get.action?parentid="+nodeId;
}
return url;
},
"success" : function(html){
container.data("init","true");
return html.content; //将数据返回给
},
"error" : function(message){
}
}
},