jstree checkbox manipulation

Question

Ho un jstree con la casella di controllo per ogni nodo. Voglio raggiungere il seguente. Fammi sapere quale metodo o parte di API ci aiuta a farlo.

1. Non voglio controllare alcun nodo figlio quando il nodo genitore è selezionato. Attualmente tutti i bambini vengono selezionati.
2. Se viene controllato un nodo figlio, controllare tutto il nodo padre. Attualmente i nodi parent vengono parzialmente controllati (quadrati). Voglio rimuovere completamente la selezione parziale. Voglio modificare completamente il comportamento delle caselle di controllo jstree.

Ho cercato documenti API ma non ho trovato nulla.

Answer 1

Dai un'occhiata alle opzioni real_checkboxes. Questo potrebbe iniziare:

 $("#jstree").jstree({ 
      "checkbox": { 
       real_checkboxes: true, 
       real_checkboxes_names: function (n) { 
       var nid = 0; 
       $(n).each(function (data) { 
        nid = $(this).attr("nodeid"); 
       }); 
       return (["check_" + nid, nid]); 
       }, 
       two_state: true 
      }, 
      "plugins": ["themes", "json_data", "ui", "checkbox"] 
     }) 
     .bind('open_node.jstree', function (e, data) { 
      $('#jstree').jstree('check_node', 'li[selected=selected]'); 
     }) 

Avrete probabilmente bisogno di cambiare il comportamento si legano in modo che controlli il genitore quando un bambino viene controllato.

Answer 2

Avevo requisiti simili a quelli della domanda e ho provato la risposta @chris sopra, ma senza successo con la risposta suggerita.

qui è quello che ho fatto per rendere questo lavoro

.bind('check_node.jstree', function (e, data) { //check all parent nodes 
    //var currentNode = data.rslt.obj.attr("id"); 
     var parentNode = data.rslt.obj.attr("parent_id") 
     $('#demo').jstree('check_node', '#'+parentNode); 
}) 
.bind('uncheck_node.jstree', function (e, data) {//uncheck all child nodes 
    var allChildNodes = data.inst._get_children(data.rslt.obj); 
     allChildNodes.each(function(idx, listItem) { 
      $('#demo').jstree('uncheck_node', '#'+$(listItem).attr("id")); 
     }); 
}) 
.jstree({ 
// List of active plugins 
    "checkbox": { 
     real_checkboxes: true, 
      two_state: true, 
      checked_parent_open: true, 
      override_ui:true 
    }, 
    "plugins" : [ 
     "themes","json_data","ui","cookies","dnd","search","types","hotkeys","contextmenu","crrm", "checkbox" 
    ] 
}) 

Answer 3

Questo è quello che ho usato. Non come laconico come gli altri, ma funziona:

$('#jstree').jstree({ 
    "plugins" : ["checkbox"], 
    "checkbox": { 
    "three_state": false 
    } 
}).on("select_node.jstree", function (e, data) { 
    var selectedNode; 
    if (data.selected.length == 1) { 
    lastSelected = data.selected.slice(0); 
    selectedNode = data.selected[0]; 
    } else { 
    // Get the difference between lastselection and current selection 
    selectedNode = $.grep(data.selected, function(x) {return $.inArray(x, lastSelected) < 0}); 
    lastSelected = data.selected.slice(0); // trick to copy array 
    } 
    // Select the parent 
    var parent = data.instance.get_node(selectedNode).parent; 
    data.instance.select_node(parent); 
}).on("deselect_node.jstree", function (e, data) { 
    // Get the difference between lastselection and current selection 
    var deselectedNode = $.grep(lastSelected,function(x) {return $.inArray(x, data.selected) < 0}) 
    , children = data.instance.get_children_dom(deselectedNode); 
    if (children.length) { 
    children.each(function(i, a) { 
     data.instance.deselect_node(a); 
     lastSelected = data.selected.slice(0); 
    }); 
    } else { 
    lastSelected = data.selected.slice(0); 
    } 
}); 

Answer 4

partire dalla versione 3.1.1 JSTree qui è quello che vorrei fare:

$('#data').jstree({ 
    'core' : { 
     'data' : [ 
      { "text" : "Root node", "children" : [ 
        { "text" : "Child node 1" }, 
        { "text" : "Child node 2" } 
      ]}, 
      { "text" : "Root node 2", "children" : [ 
        { "text" : "Child node 1" }, 
      ]} 
     ] 
    }, 
    'checkbox': { 
     three_state: false, 
     cascade: 'up' 
    }, 
    'plugins': ["checkbox"] 
}); 

JSFiddle Demo

Nota che la magia qui avviene con i parametri della casella di controllo.

Dalla documentazione:

three_state: un valore booleano che indica se le caselle di controllo dovrebbero cascata giù e hanno uno stato indeterminato. Il valore predefinito è true.

---

cascata: Questa impostazione controlla come vengono applicati a cascata e nodi indeterminati . Se 'up' è nella stringa - la cascata in cascata è abilitata, se 'down' è nella stringa - la cascata in cascata è abilitata, se 'indeterminato' è nella stringa - verranno utilizzati i nodi indeterminati. Se three_state è impostato su true, questa impostazione viene automaticamente impostata su 'su + giù + indeterminato'. Il valore predefinito è "".

Questa documentazione è stato trovato all'interno del codice sorgente per v.3.1.1

EDIT ho appena controllato V3.3.0 e sebbene la documentazione sia cambiata per questi attributi (a mio avviso, in peggio), lo code works just the same. Nel frattempo, tuttavia, sembra che questi attributi siano elencati nella loro API: three_state e cascade e al momento della scrittura sembra avere una documentazione migliore del codice sorgente.

Tenere presente che se si dispone di più nodi figlio sotto un genitore, il controllo di uno solo dei bambini sarà non controllare il genitore. Tutti i nodi devono essere controllati per avere effetto sul genitore.

Spero che questo aiuti!