2017-07-14 15 views
0

である私は、jsTreeを得た次のコードを使用して起動しました:データのJsTreeオープンノードは、プログラム、データソースは、JSON/AJAX

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

ソースは、Ajax経由getted JSON、です。私はツリーの表示時に展開する必要がある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');後に追加)以下のコードを試してみた:ID = 0と

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ノード。

open_nodeを連続して呼び出して、私のケースのすべてのノードを開く方法はありますか?

P.S.私はsimular答え/ソリューションのペアhereを見つけましたが、私はコードを理解していない、解決策は助けなかった。

答えて

0

私のソリューションは、以下のコードで、説明がコメントである:

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