如何在选择子节点时在js树中获取完整的父节点名称
我正在获取子树名称，但我希望获得父节点名称的完整层次结构。
下面的代码显示了如何获取子节点并在特定的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(', ')); } }); }); 现在它打印子节点的值，例如Child a 。 但如果树结构如下所示，我想要如下所示：
Parent Child 1 Child a Child b Child 2 Child c Child d
所以，如果我点击Child a我希望我的div内容更新为
Parent > Child 1 > Child a
截至目前，我只接受了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); }); });
但仍然没有结果get_path。 我需要使用不同的JS或插件吗？ 并且attr（’id’）的含义是什么我应该传递那个li或其他东西的id，因为我没有正确理解这个语法。
添加我的jstree：
- Parent 1
- Child 1
- ${empValue.empName}
- Child 2
- ${imgValue.imgName}
这样做会很好……它会得到完全的父母……
$('#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'); } }
var node=$('#drives_tree').jstree("get_selected", true); $("#breadcrumbs").text($('#drives_tree').jstree().get_path(node[0], ' > '));
我们有直接的方法来获取父信息。
$('#bdeViewNew').on('select_node.jstree', function (e, data) { var loMainSelected = data; alert(loMainSelected.node.parents); });
它将返回[“Child1”，“Parent”]。 使用这种方法，我们可以让所有的父母一直到root。
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'); } }
结果存储在数组loData中。 然后反转数据并循环loData数组。 你得到了你的输出
**
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 .
**
试试这个，
而不是angular.each，使用for循环。
您将得到一个包含节点所有文本的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;
打印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'); }
}
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);