JSTree - Load nodes dynamically

问题

I'm using jstree v.3. I have a working example, where all the data is downloaded once from the server side via 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"]

        });

But I have A LOT of data to present. I want to load data for items, that were clicked. I don't have problems with server side, but I can't find examples for jstree part. Can anybody share the code or give advise?

回答1:

You just didn't find the right keyword. It's called lazy loading.

You'll have to write something like:

 $("#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" ]
  });

回答2:

Below is what you need for server side data requests, passing to the url the id of the clicked node. The same method will be used when the tree is initialized.

$('#tree').jstree({
    core: {
        data: {
            url: function(node) {
                return "/ajax/get/" + node.id
            }                                            
        }
    }
});

What is left is a backend method that will return the direct children of that node. You can read more about this in the docs here: https://www.jstree.com/docs/json/

来源：https://stackoverflow.com/questions/22627132/jstree-load-nodes-dynamically