简体   繁体   English

jstree jquery 如何遍历所有节点

[英]jstree jquery how to iterate through all nodes

I'm trying to iterate through every node within a treeview in jstree.我正在尝试遍历 jstree 中树视图中的每个节点。 The treeview is 4 levels deep but I can't seem to get past the 1st level.树视图有 4 层深,但我似乎无法超过 1 层。 The following is the jQuery used to iterate.以下是用于迭代的jQuery。

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

Here is a jsfiddle illustrating my point.是一个 jsfiddle 说明了我的观点。 Please help on how I can iterate through every node in jstree.请帮助我如何遍历 jstree 中的每个节点。

This gets all the children of your tree in a flat array for your .each loop.这将在您的.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 JSFiddle - get_json 的文档

Another way is to open them before trying to access nodes in dom and then close them:另一种方法是在尝试访问 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
});

"Nodes" is an overloaded term. “节点”是一个重载的术语。 Do you mean the HTML nodes or just the JSON data used to define each node in the jstree?你是指 HTML 节点还是只是用于定义 jstree 中每个节点的 JSON 数据? I had a need to iterate through the jstree in order to extract the value for the ID field in each jstree node.我需要遍历 jstree 以提取每个 jstree 节点中 ID 字段的值。 If that's all you need, there's a simpler approach:如果这就是你所需要的,还有一个更简单的方法:

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"]);
}

I wanted a library-way of iterating over the nodes of a jsTree, so I wrote this into the jstree.js file:我想要一种遍历 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]);
            }
        }
    }
},

(Note: I'm using jsTree 3.3.4 , and I've inserted the above code on line 3712 right after the get_json function definition.) (注意:我使用的是jsTree 3.3.4 ,并且在get_json函数定义之后的第3712行插入了上面的代码。)

In code, I can iterate through the nodes of the tree like this:在代码中,我可以像这样遍历树的节点:

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM