Crea colonna come casella di controllo

Question

Carico una griglia con una richiesta di database (in PHP con CodeIgniter abd jqgrid helper). Non ho alcun problema a mostrare una bella griglia con i miei dati.

Desidero visualizzare una nuova finestra con caselle di controllo per scegliere una o più righe.

È impossibile aggiungere una nuova colonna dopo il caricamento. Quindi provo a fare così: - La colonna viene aggiunta durante la creazione della griglia, - Durante la creazione, aggiungo un'opzione 'loadComplete' con una funzione, - A diplaying, la funzione viene eseguita. Eccolo:

function ajoutCheckBox() { 
    var grille = $("#users_grid"); 

    // Construire les checkbox dans la colonne D 
    grille.setColProp('Dest', {editable: true}); 
    grille.setColProp('Dest', {edittype: 'checkbox'}); 
    grille.setColProp('Dest', {editoptions: { value: "True:False" }}); 
    grille.setColProp('Dest', {formatter: "checkbox"}); 
    grille.setColProp('Dest', {formatoptions: { disabled: true}}); 



    // Insérer la valeur false dans toutes les lignes de la colonne D 
    var index = grille.jqGrid('getGridParam', '_index'); 

    for(i in index) { 
     grille.jqGrid('setCell', i, 'Dest', 'False', {}); 
    } 
} 

Come si può vedere, il gris si chiama "#users_grid" e la colonna "Dest".

Il mio problema: niente aggiunge ...

Grazie per il vostro aiuto!

XB

EDIT: ho trovato la seguente soluzione:

• si aggiunge Colonna di caselle di controllo nella dichiarazione colModel,
• Per inizializzare il valore e attivare le caselle di controllo (sono disabilitato alla creazione!), utilizzo una funzione di callback "loadComplete".

Il codice è molto semplice ma difficile per me trovare ...

La creazione della griglia:

loadComplete: function() { ajoutCheckBox() }, 
colModel:[.... {"name":"Env","index":"Env","width":30,"hidden":false,"align":"left","edittype":"checkbox","formatter":"checkbox","formatoptions":"{ disabled: false}","editable":true,"editoptions":{"editoptions":"{ value: \"True:False\", defaultValue: \"False\" }}","size":10}}, ....] 

La funzione di callback:

function ajoutCheckBox() { 
    var grille = $("#users_grid"); 
    var index = grille.jqGrid('getGridParam', '_index'); 

    for(i in index) { // Pour toutes les lignes du tableau 
     grille.jqGrid('setCell', i, 'Env', 'False'); 
     $('#'+i).find("input:checkbox").removeAttr('disabled'); 
    } 
} 

non lo fa sembra essere ottimizzato ma funziona!

Answer 1

Non è impossibile aggiungere una nuova colonna dopo il caricamento, ma è possibile rendere visibile una colonna nascosta. È sufficiente definire la colonna con la casella di controllo (è possibile utilizzare formatoptions: { disabled: false} se necessario) ed è possibile utilizzare showCol all'interno della callback loadComplete per rendere visibile la colonna, se necessario, oppure forzarla con il metodo hideCol.

AGGIORNATO: Se ho ben capito quello che vuoi (dopo la discussione nei commenti) poi the demo dovrebbe dimostrare la soluzione:

• la demo crea colonna con caselle di controllo sulla base dei dati di input (sulla base di valore booleano esistente per ogni riga). I dati di input completi verranno salvati automaticamente da jqGrid nei parametri interni data e _index. Verrà visualizzata la prima pagina con i dati.
• la demo utilizza beforeSelectRow per gestire il clic/controllo/deselezionando le caselle di controllo. Poiché datatype: "local" sono utilizzati in jqGrid, ho utilizzato getLocalRow per accedere all'oggetto interno che ha riprogrammato i dati della riga.Nel controllare/deselezionare le caselle di controllo ho modificato il campo corrispondente dei dati. Come risultato si può cambiare lo stato di alcune checkbox, cambiare pagina e tornare alla prima pagina. Si vedrà che lo stato modificato delle caselle di controllo è stato salvato.

Qui di seguito sono la parte più importante del codice:

var mydata = [ 
     ... 
     { id: "4", ..., closed: true, ... }, 
     .... 
    ]; 

$("#list").jqGrid({ 
    datatype: "local", 
    data: mydata, 
    colModel: [ 
     ... 
     {name: "closed", width: 70, align: "center", 
      formatter: "checkbox", formatoptions: { disabled: false}, 
      edittype: "checkbox", editoptions: {value: "Yes:No", defaultValue: "Yes"}, 
      stype: "select", searchoptions: { sopt: ["eq", "ne"], 
       value: ":Any;true:Yes;false:No" } }, 
     ... 
    ], 
    beforeSelectRow: function (rowid, e) { 
     var $self = $(this), 
      iCol = $.jgrid.getCellIndex($(e.target).closest("td")[0]), 
      cm = $self.jqGrid("getGridParam", "colModel"), 
      localData = $self.jqGrid("getLocalRow", rowid); 
     if (cm[iCol].name === "closed") { 
      localData.closed = $(e.target).is(":checked"); 
     } 

     return true; // allow selection 
    }, 

    ... 
});