Как получить полное имя родительского узла в дереве js при выборе дочернего узла

Question

Я получаю имя дочернего дерева, но я хочу получить его полную иерархию имен родительских узлов.

Ниже кода показывает, как я получаю дочерний узел и распечатать его значение в конкретном сНе элементе:

$(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> 

Answer 1

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

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

Answer 2

Мы имеем прямой метод, чтобы получить родительскую информацию.

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

Он вернется [ "child1", "Родитель"]. Используя этот метод, мы можем получить все родители до корня.

Answer 3

**

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 . 

**

Answer 4

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 Array. Вы получили у г OUTPUT

Answer 5

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

Вместо 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; 

Answer 6

Несколько менее многословным версия, которая печатает Родитель> Ребенок

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

}

Answer 7

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

Answer 8

var node=$('#drives_tree').jstree("get_selected", true); 
$("#breadcrumbs").text($('#drives_tree').jstree().get_path(node[0], ' > '));