JsTree noeuds ouverts par programmation, source de données est JSON/ajax

Question

J'ai un jsTree, lancé avec le code suivant:

$(function() { 
    var grid = $('#group-tree'); 
    grid 
     .jstree({ 
      core: { 
       data: { 
        url: '<url to json source>', 
        data: function (node) { 
         return {'id': node.id}; 
        } 
       }, 
       'multiple': false, 
       'animation': false 
      } 
     }); 
}); 

Source des données JSON, getted via ajax. J'ai un tableau d'identifiants, que j'ai besoin de développer quand l'arbre est montré. Par exemple:

0 
|_1 
|_2 
    |_2.1 
    |_2.2 
    |_2.2.1 
     |_2.2.1.1 

Ma liste est ['0', '2','2.2', '2.2.1'].

J'ai essayé le code suivant (ajouté après var grid = $('#group-tree');):

grid.on('ready.jstree', function (e, data) { 
    // ids of nodes I need to expand 
    var nodeValues = ['0', '2','2.2', '2.2.1']; 
    nodeValues.forEach(function (item) { 
     $('#group-tree').jstree(true).open_node(item); 
    }); 
}); 

nœud avec id = 0 ouvre avec succès, mais id = 2 pas ouvert, car il est toujours pas chargé quand j'ouvre id = 0 nœud. Comment appeler successivement open_node pour ouvrir tous les nœuds dans mon cas?

Comment appeler successivement open_node pour ouvrir tous les nœuds dans mon cas?

P.S. J'ai trouvé une réponse/solution simulaire paire here, mais je ne comprends pas le code, la solution n'a pas aidé.

Answer 1

Ma solution est le code ci-dessous, l'explication est dans les commentaires:

$(function() { 
    // tree container 
    var grid = $('#group-tree'); 
    // queue of callbacks to be executed on node load 
    var node_callbacks_queue = []; 
    // list of ids of nodes to be expanded on tree first load 
    var node_values = ['0', '2', '2.2', '2.2.1']; 
    /** 
    * @see https://github.com/naugtur/insertionQuery 
    */ 
    insertionQ('#group-tree .jstree-node').every(function (element) { 
     // this callback executes when new node appeared in the DOM 

     // add function, which handles new added node, to the queue 
     node_callbacks_queue.push(function() { 
      // id of new node 
      var item_id = parseInt($(element).attr('id')); 
      // index of new node it the list of nodes I need to open 
      var item_index = node_values.indexOf(item_id); 
      // node shouldn't be opened on start, exit 
      if (item_index == -1) { 
       return; 
      } 

      // open node 
      $('#group-tree').jstree(true).open_node(
       item_id, 
       function() { 
        // remove id of node from the list of nodes I need to expand 
        node_values.splice(item_index, 1); 
       }, 
       false 
      );    
     }); 
    }); 
    var open_nodes_interval = setInterval(
     // this one executes 10 times in second 
     function() { 
      // execute all callbacks in queue 
      node_callbacks_queue.forEach(function (func) { 
       func(); 
      }); 
      // until all nodes, I need to expand, is handled 
      if (!node_values.length) { 
       clearInterval(open_nodes_interval); 
      } 
     }, 
     100 
    ); 
    grid 
     .jstree({ 
      core: { 
       data: { 
        url: '<url to json source>', 
        data: function (node) { 
         return {'id': node.id}; 
        } 
       }, 
       'multiple': false, 
       'animation': false 
      } 
     }); 
});