我正在我的程序中创建一个jstree。现在我可以获取已检查的节点ID。但是,我如何获得父节点id的id以及父节点的父节点id。
下面是我的javascript来获取子节点ID。
$('#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时,我可以获得9个id。那我怎么能得到Child 2和文件夹1 id。
任何人都知道请帮助我。非常感谢你!
答案 0 :(得分:3)
您可以使用从parents
获得的节点对象的data.instance.get_node()
属性。由于几个节点可能具有相同的祖先,因此您可能希望避免收集重复的内容。为此,您可以使用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&#39;#&#39;。
以下是更新后的fiddle。
要获取不含#
的列表,最简单的方法是对结果应用过滤器:
console.log('Selected: ' + nodesOnSelectedPath.filter(id => id !== '#').join(', '));
以上脚本使用EcmaScript2015(ES6)中的功能。某些编辑器在未配置为识别ES6语法时可能会突出显示语法错误。 Here您可以找到如何为ES6配置VSCode,Sublime Text和WebStorm。
在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。
答案 1 :(得分:0)
使用jQuery,您可以通过此方法找到父元素
obj.parent();
或
obj.parent(expr); //expr is a filter express
答案 2 :(得分:0)
这可以通过在jstree对象的onclick中获得this.parentNode.parentNode.parentNode.id
来实现。
示例:
$('#myjstree').jstree({<your jstree parameters>}).on('click', '.jstree-anchor', function (e) {
if (this.parentNode.parentNode.parentNode.id == 'id_im_looking_for')
alert('Yup GOT IT!')
});
使用html数据源在jstree v3.2中进行了测试。有点古怪?是。升级到jstree库后,必须进行测试,因为如果库开发人员更改了节点的这种结构,则提供的示例将不再起作用。