Как получить предков узла дерева 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 или что-то еще, так как я не понял этот синтаксис должным образом.

Добавление моего 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>

person user07    schedule 27.11.2014    source источник
comment
проверить его родителей   -  person Manticore    schedule 27.11.2014
comment
@Manticore я пытался использовать одну функцию для проверки родительского узла, но она не работает, как показано ниже: y=r.push(data.instance._get_parent(data.selected[i]).text); оповещение (у); если у вас есть какая-либо другая информация о функции, пожалуйста, дайте мне знать   -  person user07    schedule 27.11.2014


Ответы (7)


Это будет работать нормально... оно получит полных родителей...

    $('#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');
        }
    }
person Ravi kumar Raman    schedule 03.12.2014
comment
правильно ли это для (var ln = lnLevel -1; ln ›= 0 ; ln--) { var loParent = loParent.parent().parent(); if (loParent.children()[1] != undefined) { lsParents += loParent.children()[1].text + › ; } } ?? - person user07; 03.12.2014
comment
проверьте последний ответ Санджай .. Просто я сохранил результат в массиве и перевернул массив. Теперь вы получите результат - person Ravi kumar Raman; 03.12.2014
comment
Я также использую его, но я получаю неопределенность в loParent.children()[1].text . У тебя есть идеи? я использую jsTree 3.1.1 - person user596502; 12.05.2015
comment
@RavikumarRaman Привет ... Этот код отлично работает для меня. Я пытаюсь опубликовать предупреждающее сообщение в файле php... который вообще не работает. Я сделал сообщение здесь получение публикации в файле php "> stackoverflow.com/questions/48363615/, не могли бы вы посмотреть, пожалуйста. - person popeye; 22.01.2018

У нас есть прямой метод для получения родительской информации.

  $('#bdeViewNew').on('select_node.jstree', function (e, data) {
        var loMainSelected = data;
        alert(loMainSelected.node.parents);
    });

Он вернет ["Child1", "Parent"] . Используя этот метод, мы можем получить права root для всех родителей.

person Ravi kumar Raman    schedule 02.12.2014
comment
Большое спасибо, Рави, за ваш ответ. Я получаю идентификаторы, если мне нужно имя узла, то что нужно использовать, и я могу каким-либо образом получить вывод, например, «Родитель › ребенок», как я показал вверху. - person user07; 02.12.2014
comment
Рави, пожалуйста, дайте мне знать, есть ли способ получить вывод, например [Родитель › Ребенок 1 › ребенок а], если я просто выберу дочерний элемент а. как вы предложили, я получаю идентификаторы этого узла, но я хочу показать фактическое имя узла. пожалуйста, дайте мне, если у вас есть идея сделать это заранее спасибо - person user07; 02.12.2014
comment
Привет, Санджай, у нас есть альтернативный метод. - person Ravi kumar Raman; 03.12.2014
comment
Привет, Санджай, Шаг 1: Получите идентификатор выбранного узла и выбранный уровень узла. Шаг 2: Используя идентификатор узла, получите текущего родителя, как это (например, $(#101000000892).parent().parent()) шаг 2.2: следующий уровень узел ( $(#101000000892).parent().parent().parent().parent() ) шаг 2.3: построить это в переменной var loNode = $(#101000000892).parent().parent(); Шаг 2.4: Далее вы можете использовать loNode.parent().parent() Шаг 3: Используя цикл for, вы можете перебрать уровень, пока не достигнете 1. Шаг 4: Теперь вы можете получить полный текст. - person Ravi kumar Raman; 03.12.2014

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. У тебя есть результат

person Ravi kumar Raman    schedule 03.12.2014
comment
привет @ Рави Кумар Раман, если возможно, вы можете посмотреть на этот вопрос spring-controller-and-show-them-to" title="как передать список имен переключателей контроллеру Spring и показать их"> stackoverflow.com/questions/28670644/ - person user07; 25.02.2015

Попробуй это,

Вместо angular.each используйте цикл for.

Вы получите массив со всем текстом узлов.

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;
person Dany D    schedule 04.06.2015

Немного менее подробная версия, которая печатает 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');
}

}

person Sherlock    schedule 18.02.2016

person    schedule
comment
Это кажется лучшим ответом на сегодняшний день. Использование встроенного get_path — это самый чистый способ получить навигационную цепочку, не зависящую от вызовов DOM parent.parent.parent. - person CodingBarfield; 12.05.2017
comment
очевидно, это самый простой способ, который я нашел, чтобы получить полный путь к выбранному узлу - person Ash; 10.06.2017

person    schedule
comment
Привет, Рави, спасибо за ответ, но я пытался получить идентификатор выбранного узла, но он также дает мне идентификаторы своего родителя. $('#bdeViewNew li').click(function() { alert($(this).attr(id)); alert($(this).text()); }); если возможно, основываясь на приведенном выше коде, вы можете написать несколько шагов, чтобы я понял это правильно. и как я могу получить от вас упоминание шага 1? Пожалуйста, напишите код для шага 1, если это возможно. - person user07; 03.12.2014