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 获取。我有一个 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. 我找到了类似的 answer/solution 对 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
            }
        });
});

JsTree以编程方式打开节点，数据源为json/ajax

JsTree open nodes programmatically, data source is json/ajax

ajax

jquery

jstree

jquery-deferred