jstree jquery如何遍历所有节点
我正在尝试遍历jstree中树视图中的每个节点。 树视图有4层深，但我似乎无法超越第1层。 以下是用于迭代的jQuery。
$("#myTree").bind('ready.jstree', function (event, data) { $('#myTree li').each(function () { // Perform logic here } }); }); 这是一个说明我的观点的jsfiddle。 请帮助我如何迭代jstree中的每个节点。
这会使你的树的所有子节点都成为.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 – get_json的 文档
另一种方法是在尝试访问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 });
“节点”是一个超载的术语。 您是指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"]); }
我想要一个迭代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 ，我在get_json函数定义之后get_json在第3712行插入了上面的代码。）
在代码中，我可以像这样迭代树的节点：
$("#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); } });