javascript 如何在选择子节点时在js树中获取完整的父节点名称
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27169820/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to get complete parent node name in js tree while selecting the child node
提问by user07
I am getting the child tree name but I want to get its complete hierarchy of parent node names.
我正在获取子树名称，但我想获取其父节点名称的完整层次结构。
Below code shows how I get the child node and print its value in a particular div element:
下面的代码显示了我如何获取子节点并在特定 div 元素中打印其值：
$(document).ready(function () {
$('#bdeViewNew').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]).text.trim());
$('#treeBreadCrumbs').html(r.join(', '));
}
});
});
Now it prints the value of child node, e.g. Child a. But I want something like follows, if the tree structure is as shown below:
现在它打印子节点的值，例如Child a。但我想要类似如下的东西，如果树结构如下所示：
Parent
Child 1
Child a
Child b
Child 2
Child c
Child d
so if I click on Child aI want my div content updated as
所以如果我点击Child a我希望我的 div 内容更新为
Parent > Child 1 > Child a
as of now I am getting Child aonly. Please let me know how I can get the correct output.
截至目前，我Child a只得到。请让我知道如何获得正确的输出。
I tried like this as shown below to get path of all the parent node:
我尝试如下所示获取所有父节点的路径：
$(document).ready(function() {
$('#bdeViewNew').on('changed.jstree', function(e, data) {
var ids = data.inst.get_path('#bdeViewNew' + data.rslt.obj.attr('id'),true);
var names = data.inst.get_path('#bdeViewNew' + data.rslt.obj.attr('id'),false);
alert("Path [ID or Name] from root node to selected node = ID's = "+ids+" :: Name's = "+names);
});
});
but still no result to get_path. Do I need to use different JS or a plugin? And what is the meaning of attr('id') i should pass the id of that li or something else as i did'nt understand this syntax properly.
但仍然没有结果到get_path。我需要使用不同的 JS 或插件吗？attr('id') 的含义是什么我应该传递那个 li 的 id 或其他东西，因为我没有正确理解这个语法。
Adding my jstree:
添加我的jstree：
<div id="bdeViewNew">
<ul>
<li id="bde" data-jstree='{"opened":true,"icon":"./images/tree.png"}'">
Parent 1
<ul>
<li id="aaa" data-jstree='{"opened":true,"icon":"./images/tree.png"}'>
Child 1 <c:forEach items="${empInfo.empList}"
var="empValue">
<ul>
<li id="bbb" data-jstree='{"icon":"./images/tree.png"}' >${empValue.empName}</li>
</ul>
</c:forEach>
</li>
</ul>
<ul>
<li id="ccc" data-jstree='{"icon":"./images/tree.png"}'>Child 2
<c:forEach items="${imgInfo.imgList}"
var="imgValue">
<ul>
<li id="ddd" data-jstree='{"icon":"./images/tree.png"}'>${imgValue.imgName}</li>
</ul>
</c:forEach>
</li>
</ul>
</li>
</ul>
</div>
回答by Ravi kumar Raman
This will work fine... it will get the full parents...
这会工作得很好......它会得到完整的父母......
$('#bdeViewNew').on('select_node.jstree', function (e, data) {
var loMainSelected = data;
uiGetParents(loMainSelected);
});
function uiGetParents(loSelectedNode) {
try {
var lnLevel = loSelectedNode.node.parents.length;
var lsSelectedID = loSelectedNode.node.id;
var loParent = $("#" + lsSelectedID);
var lsParents = loSelectedNode.node.text + ' >';
for (var ln = 0; ln <= lnLevel -1 ; ln++) {
var loParent = loParent.parent().parent();
if (loParent.children()[1] != undefined) {
lsParents += loParent.children()[1].text + " > ";
}
}
if (lsParents.length > 0) {
lsParents = lsParents.substring(0, lsParents.length - 1);
}
alert(lsParents);
}
catch (err) {
alert('Error in uiGetParents');
}
}
回答by Ash
var node=$('#drives_tree').jstree("get_selected", true);
$("#breadcrumbs").text($('#drives_tree').jstree().get_path(node[0], ' > '));
回答by Ravi kumar Raman
We have direct method to get the parent information.
我们有直接的方法来获取父信息。
$('#bdeViewNew').on('select_node.jstree', function (e, data) {
var loMainSelected = data;
alert(loMainSelected.node.parents);
});
It will return ["Child1", "Parent"] . Using this method we can get the all the parents up to root.
它将返回 ["Child1", "Parent"] 。使用这种方法，我们可以让所有的父母都成为 root。
回答by Ravi kumar Raman
function uiGetParents(loSelectedNode) {
try {
var loData = [];
var lnLevel = loSelectedNode.node.parents.length;
var lsSelectedID = loSelectedNode.node.id;
var loParent = $("#" + lsSelectedID);
var lsParents = loSelectedNode.node.text + ' >';
for (var ln = 0; ln <= lnLevel - 1 ; ln++) {
var loParent = loParent.parent().parent();
if (loParent.children()[1] != undefined) {
lsParents += loParent.children()[1].text + " > ";
loData.push(loParent.children()[1].text);
}
}
if (lsParents.length > 0) {
lsParents = lsParents.substring(0, lsParents.length - 1);
}
alert(lsParents);
alert(loData.reverse());
}
catch (err) {
alert('Error in uiGetParents');
}
}
The result stored in array loData . and just reverse the data and loop the loData Array. You got u r output
结果存储在数组 loData 中。只需反转数据并循环 loData 数组。你有你的输出
回答by Dany D
Try this,
试试这个，
Instead of angular.each, use a for loop.
使用 for 循环代替 angular.each。
You will get an arry with all the text of the nodes.
您将获得包含节点所有文本的 arry。
var breadcrumbArr = [selectedNode.node.text];
angular.forEach(selectedNode.node.parents, function(element, index) {
if (element === '#') return;
breadcrumbArr.push($('#'+element).find('a:first').text())
});
breadcrumbArr.reverse();
return breadcrumbArr;
回答by Sherlock
A slightly less verbose version that prints Parent > Child
打印 Parent > Child 的稍微不那么冗长的版本
function uiGetParents(node) {
try {
var level = node.node.parents.length;
var elem = $('#' + node.node.id);
var text = node.node.text;
for (var ln = 0; ln <= level - 1 ; ln++) {
elem = elem.parent().parent();
var child = elem.children()[1];
if (child != undefined) {
text = child.text + ' > ' + text;
}
}
console.log(text);
}
catch (err) {
console.log('Error in uiGetParents');
}
}
}
回答by user2220199
var node = $tree.jstree().get_node(id),
formatted_name = $tree.jstree().get_text(node);
$.each(node.parents, function(key, parentId) {
if ( parentId !== "#" ) {
var parent = $tree.jstree().get_node(parentId);
formatted_name = $tree.jstree().get_text(parent) + "->" + formatted_name;
}
});
console.log(formatted_name);
回答by Ravi kumar Raman
**
**
Step 1 : Get the Selected node Id and selected node level
Step 2 : Using node id get the current parent like this ( ex.. $("#101000000892").parent().parent() )
step 2.2 : Next level node ( $("#101000000892").parent().parent().parent().parent() )
step 2.3 : stroe this in a vairable var loNode = $("#101000000892").parent().parent();
step 2.4 : Next you can loNode.parent().parent()
Step 3 : Using for loop u can loop through the level until reached 1.
step 4 : Now you can get the full text .
**
**
