jquery – JSTree – 动态加载节点

我正在使用jstree v.3.

我有一个工作示例,其中所有数据都是通过ajax从服务器端下载的.

$('#tree').jstree({
            'core': {
                'data': {
                    'url': "/ajax/getAll",                           
                    'data': function(node) {
                        return {'id': node.id};
                    },
                    // "check_callback" : true                    
                }
            },
            "types": {
                "category": {
                    "icon": "/img/category.png"
                },
                "page": {
                    "icon": "/img/page.png"
                }
            },
            "plugins" : ["types"]

        });

但我有很多数据要呈现.我想加载被点击的项目的数据.我没有服务器端的问题,但我找不到jstree部分的例子.任何人都可以分享代码或提供建议吗?

最佳答案 你刚刚找不到合适的关键字.它被称为延迟加载.

你必须写下这样的东西:

 $("#treeCell").jstree({
      "json_data" : {
        "ajax" : {
            "url" : function( node ){
                      // lets figure out the url - this function needs to
                      // return the formed URL. If "node" is "-1" then
                      // this is the top of the hierarchy and there's no parent
                      // key. Otherwise, node is a jquery object of
                      // the respective node from which we can fish out the
                      // metadata needed. (added below at "metadata" : op )
                      if( node == -1 ){
                        return "/list?parentkey="
                      } else {
                        return "/list?parentkey=" + node.data( "key" );
                      }
                    },
            "type" : "get",  // this is a GET not a POST
            "success" : function(ops) {
                  // this is called when the AJAX request is successful. "ops"
                  // contains the returned data from the server, which in
                  // my case is a json object containing an array of objects.
                  data = []
                  // go through data and create an array of objects to be given
                  // to jsTree just like when you're creating a static jsTree.
                  for( opnum in ops ){
                    var op = ops[opnum]
                    node = {
                        "data" : op.info,
                        "metadata" :  op ,
                        // THIS LINE BELOW IS THE MAGIC KEY!!! This will force
                        //  jsTree to consider the node
                        // openable and thus issue a new AJAX call hen the
                        // user clicks on the little "+" symbol or
                        // whatever opens nodes in your theme
                        "state" : "closed"
                    }
                    data.push( node );
                  }
                  return data; // this will return the formed array
                               // "data" to jsTree which will turn
                               // it into a list of nodes and
                               // insert it into the tree.
            }
         },
      },
      "core" : {"html_titles" : true,  "load_open" : true },
      "plugins" : [ "themes", "json_data", "ui", "cookies", "crrm", "sort" ]
  });
点赞