Espandi nodo jsTree quando si fa clic su padre

Question

Sto cercando di implementare un albero molto semplice usando jsTree. Ho trovato la documentazione densa e travolgente.

questo momento, mi espandere/chiudere un nodo facendo clic sulla freccia mostrato qui:

Voglio essere in grado di espandere/comprimere facendo clic sul nome del nodo troppo:

Il codice che sto usando è semplice; Non ho alterato il javascript per 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

basta aggiungere un listener di eventi nel file HTML e chiamare la funzione toggle_node. Questo codice sotto ascolta per un singolo clic.

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

Se si desidera ascoltare per un doppio clic è necessario un altro listener di eventi, dal momento che jsTree non supporta ancora gli eventi doppio clic.

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

Spero che questo aiuti.

Answer 2

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

Questo ha funzionato per me. la soluzione di oerls no.

Answer 3

Si tratta di funzionalità standard quando si crea l'istanza di jsTree:

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

jsTree API

Questa alternerà il ramo dove mai viene cliccato su tutta la fila.

Answer 4

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

anche questo funzionerà