javascript - 如何在jstree中获取父对象和父对象的父id

Question

我正在我的程序中创建一个 jstree。现在我可以获取已检查的节点 ID。但是如何获取父节点id的id以及父节点的父节点id。

下面是我获取子节点 ID 的 javascript。

 $('#tree-container').on('changed.jstree', function (e, data) {
                var i, j, r = [];
                for (i = 0, j = data.selected.length; i < j; i++) {
                    r.push(data.instance.get_node(data.selected[i]).id.trim());
                }
                //alert('Selected: ' + r.join(', '));
                console.log('Selected: ' + r.join(', '));
			

            });

这是我的 jsfddle。请看一下。 http://jsfiddle.net/jjfcnho8/2/当我选择 Child 9 时，我可以获得 child 9 id。那么我怎样才能得到 Child 2 和文件夹 1 的 id。

请知道的 friend 帮帮我。非常感谢!

Answer 1

您可以使用从 data.instance.get_node() 获取的节点对象的 parents 属性。由于多个节点可能具有相同的祖先，您可能希望避免收集重复项。为此，您可以使用 Set。这只是您可以做到的一种方式:

var nodesOnSelectedPath = [...data.selected.reduce(function (acc, nodeId) {
    var node = data.instance.get_node(nodeId);
    return new Set([...acc, ...node.parents, node.id]);
}, new Set)];

console.log('Selected: ' + nodesOnSelectedPath.join(', '));

请注意，这也将包括根节点，其 ID 为“#”。

这是更新的 fiddle .

没有根节点

要获取没有#的列表，最简单的方法是对结果应用过滤器:

console.log('Selected: ' + nodesOnSelectedPath.filter(id => id !== '#').join(', '));

EcmaScript2015

上述脚本使用了 EcmaScript2015 (ES6) 的特性。某些编辑器在未配置为识别 ES6 语法时可能会突出显示语法错误。 Here您可以找到如何为 ES6 配置 VSCode、Sublime Text 和 WebStorm。

ES5 替代方案

在 ES5 中，您将使用一个对象 (acc) 来收集唯一的 id 引用作为属性名称。虽然 Object.keys 实际上是 ES6，但它通常在其他 ES5 浏览器中得到支持:

var nodesOnSelectedPath = Object.keys(data.selected.reduce(function (acc, nodeId) {
    var node = data.instance.get_node(nodeId);
    node.parents.forEach(function (id) {
        acc[id] = 1;
    });
    acc[node.id] = 1;
    return acc;
}, {}));

这里是对应的fiddle .

数据中的循环引用

你在评论中写道你试图这样做:

JSON.stringify(data)

但是该数据结构中包含父对象和子对象的引用，因此可以从子对象到其父对象，再从那里返回到其子对象，...这是无穷无尽的。此类结构无法转换为 JSON。参见 this Q&A寻求解决方案。