Rozwiń węzeł jsTree po kliknięciu elementu nadrzędnego

Question

Próbuję zaimplementować bardzo proste drzewo przy użyciu jsTree. Uważam, że dokumentacja jest gęsta i przytłaczająca.

Teraz ja rozwinąć/zwinąć węzeł klikając strzałkę poniżej:

Chcę być w stanie rozwinąć/zwinąć klikając nazwę węzła też:

Kod, którego używam jest prosty; Nie zmieniły JavaScript dla jsTree:

<ul id="tree"> 
    <li> 
     SubFolder1 
     <ul id="tree"> 
     <li data-jstree='{"icon":"/Images/blue-folder.png"}'>Pub 1</li> 
     </ul> 
    </li> 
</ul> 

Answer 1

Wystarczy dodać detektor zdarzeń w pliku html i wywołać funkcję toggle_node. Poniższy kod służy do słuchania pojedynczego kliknięcia.

$(document).ready(function(){ 
    $('#jstree_div').on("select_node.jstree", function (e, data) { $('#jstree_div').toggle_node(data.node); }); 
} 

Jeśli chcesz nasłuchiwać podwójnego kliknięcia, potrzebujesz innego detektora zdarzeń, ponieważ jsTree nie obsługuje jeszcze zdarzeń z podwójnym kliknięciem.

$('#jstree_div').on("dblclick",function (e) { 
    var li = $(e.target).closest("li"); 
    var node = $('#jstree_div').get_node(li[0].id); 

    $('#jstree_div').toggle_node(node) 
}); 

Nadzieję, że pomaga.

Answer 2

$('#tree').on('select_node.jstree', function (e, data) { 
    data.instance.toggle_node(data.node); 
}); 

To zadziałało dla mnie. Rozwiązanie Oerls nie.

Answer 3

Jest to standardowa funkcjonalność podczas tworzenia instancji jsTree:

$('#jstree').jstree({ 
    "plugins" : [ "wholerow" ] 
}); 

jsTree API

To będzie przełączać gałąź gdzie zawsze, gdy użytkownik klika na całym rzędzie.

Answer 4

$('#jstree').on("select_node.jstree", function (e, data) { 
    $('#jstree').jstree("toggle_node", data.node); 
}); 

również będzie działać