Disabilitare l'intero jsTree

Question

Sto usando jsTree e ho un modulo a destra in base al nodo selezionato che può essere modificato/salvato. L'obiettivo è impedire all'utente di fare clic in qualsiasi altro punto dell'albero mentre sta modificando il modulo.

C'è un modo per disabilitare/abilitare la funzionalità dell'albero mantenendo comunque l'albero visivamente disponibile?

Ho provato a utilizzare il metodo disable_node(obj) e applicarlo alla radice dell'albero ma non sembra essere una soluzione.

Qualche suggerimento? O questa non è una funzionalità possibile per la libreria jsTree?

Grazie

Answer 1

Per disabilitare nodo selezionato fare in questo modo:

var node = $("#tree").jstree().get_selected(); 
$("#tree").jstree().disable_node(node); 

Per disabilitare tutti i nodi utilizzano:

$('#tree li').each(function() { 
    $("#tree").jstree().disable_node(this.id); 
}) 

AGGIORNATO

non ho trovato un modo per impedire l'apertura di un nodo disabilitato quindi sto solo disabilitando tutti i figli di un nodo chiuso.

See demo: Fiddle

Answer 2

Modifica Come sottolineato da @charles disabilitando i nodi non disabilitare il plugin menu (almeno con un menu personalizzato) o drag'n'drop - punto di inserimento 4 per tenere cura di questo

per disattivare l'intero albero

1. disabilitare tutti i nodi resi - disattivare ciascun nodo id o ottenere un array di ID per fare una singola chiamata a "disable_node"
2. vietare l'apertura di nuovi nodi - intercettare e bloccare l'evento click sull'icona aperto
3. vietare l'apertura di nuovi nodi con un doppio click - modificare la impostazioni albero correnti
4. Se l'albero è modificabile dall'utente in qualsiasi modo, disattivare temporaneamente tutte le modifiche insediano core.check_callback = false

Nota il punto 2 è di base sulle caratteristiche non documentate e (data la storia del plugin jstree) sarà probabilmente non funziona sulle versioni future

Vedere il frammento per una demo

var data1 = [{ 
 
    "id": "W", 
 
    "text": "World", 
 
    "state": { "opened": true }, 
 
    "children": [{"text": "Asia"}, 
 
       {"text": "Africa"}, 
 
       {"text": "Europe", 
 
       "state": { "opened": false }, 
 
       "children": [ "France","Germany","UK" ] 
 
    }] 
 
}]; 
 

 
$('#Tree').jstree({ 
 
    core: {data: data1, 
 
    check_callback: true 
 
    }, 
 
    plugins: ['dnd','contextmenu','checkbox'] 
 
}) 
 

 
function DisableFlawed() { 
 
    // this is not enough 
 
    $('#Tree li.jstree-node').each(function() { 
 
    $('#Tree').jstree("disable_node", this.id) 
 
    }) 
 
} 
 
function Disable() { 
 
    // disable visible nodes 
 
    $('#Tree li.jstree-node').each(function() { 
 
    $('#Tree').jstree("disable_node", this.id) 
 
    }) 
 
    // block open new nodes 
 
    $('#Tree i.jstree-ocl') 
 
    .off('click.block') 
 
    .on('click.block', function() { 
 
    return false; 
 
    }); 
 
    // eventually... dbl click 
 
    $('#Tree').jstree().settings.core.dblclick_toggle = false; 
 
    // eventually... block all edits 
 
    $('#Tree').jstree().settings.core.check_callback = false; 
 
} 
 
function Enable() { 
 
    // enable again visible nodes 
 
    $('#Tree li.jstree-node').each(function() { 
 
    $('#Tree').jstree("enable_node", this.id) 
 
    }); 
 
    // ublock open new nodes 
 
    $('#Tree i.jstree-ocl') 
 
    // 
 
    .off('click.block'); 
 
    // eventually... dbl click 
 
    $('#Tree').jstree().settings.core.dblclick_toggle = true; 
 
    // eventually... unblock all edits 
 
    // set to true OR reset to whatever user defined function you are using 
 
    $('#Tree').jstree().settings.core.check_callback = true; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" type="text/css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script> 
 
<button onclick="DisableFlawed()">Disable (bad)</button> 
 
<button onclick="Disable()">Disable (ok)</button> 
 
<button onclick="Enable()">Enable</button> 
 
<div id="Tree"></div>

Answer 3

Oltre alla risposta di Nikolay Ermakov, disabilitando i nodi non disabilitare il plugin menu (almeno con un menu personalizzato) o drag'n'drop. Se si desidera farlo, è necessario aggiungere un controllo supplementare in queste funzioni (testato con JsTree 3.2.1)

$('#tree').jstree({ 
    // ... 
    contextmenu: { 
     items: customMenu 
    }, 
    dnd: { 
     is_draggable: function (node) { 
      return !node[0].state.disabled; 
     } 
    }, 
}); 

function customMenu(node) 
{ 
    if (node.state.disabled) 
     return false; 

    // usual menu generation code 
} 

Un altro modo è quello di usare qualcosa jQuery BlockUI plugin per fare un po 'al di fuori di blocco generale del jsTree.