选择它后如何获取JS树节点的祖先? [英] How to get the ancestors of a JS tree node when it is selected?

问题描述

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

I am getting the child tree name but I want to get its complete hierarchy of parent node names.

下面的代码显示了如何获取子节点并在特定的div元素中打印其值:

Below code shows how I get the child node and print its value in a particular div element:

$(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.但是，如果树形结构如下所示，我想要类似以下内容:

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:

Parent
  Child 1
    Child a
    Child b
  Child 2
    Child c
    Child d

因此，如果我单击Child a，我希望将div内容更新为

so if I click on Child a I want my div content updated as

Parent > Child 1 > Child a

截至目前，我只得到Child a.请让我知道如何获得正确的输出.

as of now I am getting Child a only. Please let me know how I can get the correct output.

我尝试如下所示，以获取所有父节点的路径:

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);
 });
 });

，但对get_path仍然没有结果.我是否需要使用其他JS或插件?而attr('id')的含义是什么，我应该传递那个li的id或其他东西，因为我不正确地理解这种语法.

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.

添加我的jstree:

Adding my 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>

推荐答案

这将正常工作...它将获得完整的父母...

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');
        }
    }

这篇关于选择它后如何获取JS树节点的祖先?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！