javascript - example - jstree wholerow

jstree jquery cómo iterar a través de todos los nodos

Question

Estoy tratando de recorrer cada nodo dentro de una vista de árbol en jstree. La vista de árbol tiene 4 niveles de profundidad, pero parece que no puedo pasar del 1er nivel. El siguiente es el jQuery utilizado para iterar.

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

Here hay un jsfiddle que ilustra mi punto. Por favor, ayuda sobre cómo puedo iterar a través de cada nodo en jstree.

Answer 1

"Nodos" es un término sobrecargado. ¿Se refiere a los nodos HTML o simplemente a los datos JSON utilizados para definir cada nodo en el jstree? Tuve la necesidad de recorrer el jstree para extraer el valor del campo de ID en cada nodo jstree. Si eso es todo lo que necesita, hay un enfoque más simple:

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

Answer 2

Esto hace que todos los hijos de su árbol .each una matriz plana para su bucle .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 para get_json

Answer 3

Otra forma es abrirlos antes de intentar acceder a los nodos en dom y luego cerrarlos:

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

Answer 4

Quería una forma de biblioteca de iteración sobre los nodos de un jsTree, así que escribí esto en el archivo 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]);
            }
        }
    }
},

(Nota: estoy usando jsTree 3.3.4 , y he insertado el código anterior en la línea 3712 justo después de la definición de la función get_json ).

En el código, puedo iterar a través de los nodos del árbol como este:

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