JsTree開放節點編程，數據源是JSON/AJAX

Question

我有一個jsTree，用下面的代碼推出：數據

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

來源是JSON，通過AJAX getted。我有一個ID數組，當顯示樹時我需要擴展它。例如：

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

我的清單是['0', '2','2.2', '2.2.1']。

我試過下面的代碼（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); 
    }); 
}); 

節點使用id = 0打開成功地，但ID = 2沒有打開，因爲它，當我打開ID = 0仍然沒有加載節點。

如何連續呼叫open_node打開我的情況下的所有節點？

P.S.我找到了相似的答案/解決方案對here，但我不明白代碼，解決方案沒有幫助。

Answer 1

我的解決方案是下面的代碼，解釋是評論：

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