如何获取选择 JS 树节点时的祖先

How to get the ancestors of a JS tree node when it is selected?

本文关键字：树节点 JS 祖先 选择 何获取 获取      更新时间：2023-09-26

我正在获取子树名称，但我想获取其父节点名称的完整层次结构。

下面的代码显示了我如何获取子节点并在特定的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： 

 <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;
        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"]。使用这种方法，我们可以让所有的父母都扎根。

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;
打印父

级>子级稍微不那么冗长的版本

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);
相关文章：