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打开所有节点？

PS 我找到了类似的答案/解决方案对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

1 个答案: