web-dev-qa-db-ja.com

jstree jqueryすべてのノードを反復する方法

私はjstreeのツリービュー内のすべてのノードを反復処理しようとしています。ツリービューは4レベルの深さですが、1レベルを超えられないようです。以下は、反復処理に使用されるjQueryです。

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

ここ は、私のポイントを説明するjsfiddleです。 jstreeのすべてのノードを反復処理する方法を教えてください。

javascriptjqueryjstree
17
Hshdj122

これにより、.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 - gets_jsonのドキュメント

21
E. Sundin

別の方法は、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
});
8
juvian

「ノード」は過負荷の用語です。 HTMLノードを意味するのか、それともjstreeの各ノードを定義するために使用するJSONデータだけを意味するのか？各jstreeノードのIDフィールドの値を抽出するために、jstreeを反復処理する必要がありました。それで十分な場合は、より簡単な方法があります。

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

私は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);
    }
});
3
SNag