jquery jsTree 总结

最近在项目中用到了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){
                               }
                                }
                          }, 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

转载于:https://www.cnblogs.com/justincai/archive/2012/09/12/2682321.html