Javascript 选择JS树节点时,如何获取其祖先?
我正在获取子树名称,但我希望获取父节点名称的完整层次结构 下面的代码显示了如何获取子节点并在特定div元素中打印其值:Javascript 选择JS树节点时,如何获取其祖先?,javascript,jquery,jstree,Javascript,Jquery,Jstree,我正在获取子树名称,但我希望获取父节点名称的完整层次结构 下面的代码显示了如何获取子节点并在特定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++) {
$(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(', '));
}
});
});
因此,如果我点击Child a
我希望我的div内容更新为
Parent > Child 1 > Child a
到目前为止,我只得到一个孩子。请让我知道如何获得正确的输出
我尝试如下所示获取所有父节点的路径:
$(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);
});
});
但是仍然没有结果来获得路径。我需要使用不同的JS或插件吗?attr('id')的含义是什么?我应该传递那个li的id或者其他什么,因为我没有正确理解这个语法
添加我的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>
我们有直接方法获取家长信息。
$('#bdeViewNew').on('select_node.jstree', function (e, data) {
var loMainSelected = data;
alert(loMainSelected.node.parents);
});
它将返回[“Child1”,“Parent”]。使用此方法,我们可以将所有父项都设置为root。**
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 .
**这将很好地工作。。。它将得到完整的父母
$('#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');
}
}
$('#bdeViewNew')。在('select_node.jstree',函数(e,数据){
var loMainSelected=数据;
uiGetParents(选择Lomain);
});
函数uiGetParents(LoseSelectedNode){
试一试{
var lnLevel=loSelectedNode.node.parents.length;
var lsSelectedID=loseselectedNode.node.id;
var loParent=$(“#”+lsSelectedID);
var lsParents=loSelectedNode.node.text+'>';
对于(变量ln=0;ln 0){
lsParents=lsParents.substring(0,lsParents.length-1);
}
警觉(单亲);
}
捕捉(错误){
警报(“uiGetParents中的错误”);
}
}
函数uiGetParents(LoseSelectedNode){
试一试{
var loData=[];
var lnLevel=loSelectedNode.node.parents.length;
var lsSelectedID=loseselectedNode.node.id;
var loParent=$(“#”+lsSelectedID);
var lsParents=loSelectedNode.node.text+'>';
对于(变量ln=0;ln 0){
lsParents=lsParents.substring(0,lsParents.length-1);
}
警觉(单亲);
警报(loData.reverse());
}
捕捉(错误){
警报(“uiGetParents中的错误”);
}
}
存储在数组loData中的结果。只需反转数据并循环loData数组。你得到了你的输出试试这个
使用for循环代替angular.each
您将获得一个包含所有节点文本的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;
打印父项>子项的稍微不太详细的版本
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');
}
函数uiGetParents(节点){
试一试{
变量级别=node.node.parents.length;
var elem=$('#'+node.node.id);
var text=node.node.text;
对于(var ln=0;ln检查其parents@Manticore我尝试使用一个函数检查父节点,但其工作方式如下:y=r.push(data.instance.\u get\u parent(data.selected[i]).text);alert(y);如果您有关于函数的任何其他信息,请让我知道谢谢Ravi的回复我正在获取ID如果我想要节点名称,那么需要使用什么,以及它们的任何方式我可以获得输出,如父>子,如我在topRavi所示,请让我知道是否有任何方式可以获得输出,如[父>子1>子a]如果我只是在子节点a上选择。正如你所建议的,我正在获取该节点的Id,但我想显示实际的节点名称。如果你有任何想法,请告诉我。提前感谢Hi Sanjay,我们有其他方法。Hi Sanjay,步骤1:获取所选节点Id和所选节点级别步骤2:使用节点Id获取当前父节点,如下所示步骤2.2:下一级节点($(“#101000000892”).parent().parent().parent().parent().parent().parent().parent())步骤2.3:在一个变量loNode=$(“#101000000892”).parent().parent();步骤2.4:下一步可以选择loNode.parent().parent()步骤3:使用for循环u可以在级别中循环,直到达到1。步骤4:现在您可以获得全文。Hi ravi感谢您的回答,但我已经尝试过这样获得所选节点的id,但它也给了我其父节点的id。$('#bdeViewNew li')。单击(函数(){alert($(this).attr(“id”);alert($(this).text())});如果可能的话,基于obove代码,你能写一些步骤让我明白吗?我将如何让你提到步骤1?如果可能的话,请为步骤1写代码。这对(var ln=lnLevel-1;ln>=0;ln--)正确吗{var loParent=loParent.parent().parent();if(loParent.childrent()[1]!=未定义){lsParents+=loParent.childrent()[1].text+“>”;}}}??检查最新答案sanjay..我只是将结果存储在数组中并反转数组。现在,你也将使用它获得结果,但我在loParent.children()上未定义结果[1].text.你有什么想法吗?我正在使用jsTree 3.1。1@RavikumarRaman嗨…这段代码对我来说非常适合。我正在尝试将警报消息发布到一个php文件中…这根本不起作用。我已经在这里发布了一篇帖子,你能看一下吗。嗨@Ravi kumar Raman如果可能的话,你能看一下这个问题吗这似乎是最好的到目前为止,使用内置get_路径是获取面包屑的最干净的方法,而不依赖于DOM parent.parent.parent调用。显然,这是我找到的获取所选节点完整路径的最简单方法
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;
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');
}
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);
var node=$('#drives_tree').jstree("get_selected", true);
$("#breadcrumbs").text($('#drives_tree').jstree().get_path(node[0], ' > '));