jstree jquery如何遍历所有节点答案

【问题标题】：jstree jquery how to iterate through all nodesjstree jquery如何遍历所有节点
【发布时间】：2016-01-27 16:57:40
【问题描述】：

我正在尝试遍历 jstree 中树视图中的每个节点。树视图有 4 层深，但我似乎无法超过第 1 层。下面是用来迭代的jQuery。

$("#myTree").bind('ready.jstree', function (event, data) {
    $('#myTree li').each(function () {
        // Perform logic here
        }
    });
});

Here 是一个 jsfiddle，说明了我的观点。请帮助我如何遍历 jstree 中的每个节点。

【问题讨论】：

检查代码返回单个li 似乎是jsTree的抽象造成的。当您的听众触发 #myTree 时，实际上只包含一个 li。
如何在树视图是动态的情况下容纳多个 li？
您有几个答案可以提供解决方案。如果某个答案看起来是您问题的完整解决方案，请考虑将其标记为已接受。

标签： javascript jquery jstree

【解决方案1】：

这会为您的.each 循环获取一个平面数组中的所有子树。

$("#tree").bind('ready.jstree', function(event, data) {
  var $tree = $(this);
  $($tree.jstree().get_json($tree, {
      flat: true
    }))
    .each(function(index, value) {
      var node = $("#tree").jstree().get_node(this.id);
      var lvl = node.parents.length;
      var idx = index;
      console.log('node index = ' + idx + ' level = ' + lvl);
    });
});

JSFiddle - Docs for get_json

【讨论】：

【解决方案2】：

另一种方法是在尝试访问dom中的节点之前打开它们，然后关闭它们：

$("#tree").bind('ready.jstree', function (event, data) {
  $(this).jstree().open_all(); // open all nodes so they are visible in dom
    $('#tree li').each(function (index,value) {
        var node = $("#tree").jstree().get_node(this.id);
        var lvl = node.parents.length;
        var idx = index;
        console.log('node index = ' + idx + ' level = ' + lvl);
    });
    $(this).jstree().close_all(); // close all again
});

【讨论】：

【解决方案3】：

“节点”是一个重载的术语。您是指 HTML 节点还是仅用于定义 jstree 中每个节点的 JSON 数据？我需要遍历 jstree 以提取每个 jstree 节点中 ID 字段的值。如果这就是您所需要的，还有一种更简单的方法：

var v =$("#tree").jstree(true).get_json('#', {'flat': true});
for (i = 0; i < v.length && i < 10; i++) {
    var z = v[i];
    alert("z[id] = " + z["id"]);
}

【讨论】：

"您是指 HTML 节点还是只是用于定义 jstree 中每个节点的 JSON 数据？"这是一个重要的区别，在您说出问题之前，我一直很困惑。谢谢。

【解决方案4】：

我想要一种遍历 jsTree 节点的库方式，因此我将其写入jstree.js 文件：

each_node: function(callback) {
    if (callback) {
        var id, nodes = this._model.data;
        for (id in nodes) {
            if (nodes.hasOwnProperty(id) /*&& id !== $.jstree.root*/) {
                callback.call(this, nodes[id]);
            }
        }
    }
},

（注意：我使用的是jsTree 3.3.4，并且我在3712 行的get_json 函数定义之后插入了上述代码。）

在代码中，我可以像这样遍历树的节点：

$("#myTree").jstree(true).each_node(function (node) {
    // 'this' contains the jsTree reference

    // example usage: hide leaf nodes having a certain data attribute = true
    if (this.is_leaf(node) && node.data[attribute]) {
        this.hide_node(node);
    }
});

【讨论】：

【解决方案5】：

var jsonNodes = $('#jstree').jstree(true).get_json('#', { flat: true });
 $.each(jsonNodes, function (i, v) {
     if (true) {
          // Following line will hide the check box on some condition    
          // $("#" + v.id + "_anchor i.jstree-checkbox").toggle(false);
          // it will print the id
           console.log(v.id);
                 }
            });

【讨论】：