web-dev-qa-db-fra.com

jstree jquery comment itérer sur tous les nœuds

J'essaie d'itérer à travers chaque nœud dans une arborescence dans jstree. L'arborescence est profonde de 4 niveaux mais je n'arrive pas à dépasser le 1er niveau. Ce qui suit est le jQuery utilisé pour itérer.

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

Ici est un jsfiddle illustrant mon propos. Aidez-moi à savoir comment je peux parcourir chaque nœud de jstree.

javascriptjqueryjstree
17
Hshdj122

Cela met tous les enfants de votre arbre dans un tableau plat pour votre .each boucle.

$("#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 - Documents pour get_json

21
E. Sundin

Une autre façon est de les ouvrir avant d'essayer d'accéder aux nœuds dans dom puis de les fermer:

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

"Nœuds" est un terme surchargé. Voulez-vous dire les nœuds HTML ou simplement les données JSON utilisées pour définir chaque nœud dans le jstree? J'avais besoin de parcourir le jstree afin d'extraire la valeur du champ ID dans chaque nœud jstree. Si c'est tout ce dont vous avez besoin, il existe une approche plus 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"]);
}
4
John Strong

Je voulais une bibliothèque pour itérer sur les nœuds d'un jsTree, alors j'ai écrit ceci dans le jstree.js fichier:

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

(Remarque: j'utilise jsTree 3.3.4, et j'ai inséré le code ci-dessus sur la ligne 3712 juste après le get_json définition de la fonction.)

En code, je peux parcourir les nœuds de l'arbre comme ceci:

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