Casella di controllo JQgrid nel database di aggiornamento onclick

Question

Ho una colonna di controllo nel mio JqGrid che viene caricata dal DB, quindi è selezionata o non controllata quando viene caricata.

Quello che voglio è: Se la casella di controllo è selezionata o non raccolta dall'utente, voglio aggiornare il DB nello stesso. Non voglio che l'utente prema invio o altro. solo 1 clic e invia l'azione a DB

nome: 'Aktiv', indice: 'Aktiv', larghezza: 100, tipo di modifica: 'checkbox', allinea: 'center', formattatore: "checkbox", modificabile: true, formatoptions: {disabilitato: true}

Answer 1

È possibile impostare un gestore click eventi all'interno di loadComplete:

loadComplete: function() { 
    var iCol = getColumnIndexByName ($(this), 'Aktiv'), rows = this.rows, i, 
     c = rows.length; 

    for (i = 1; i < c; i += 1) { 
     $(rows[i].cells[iCol]).click(function (e) { 
      var id = $(e.target).closest('tr')[0].id, 
       isChecked = $(e.target).is(':checked'); 
      alert('clicked on the checkbox in the row with id=' + id + 
       '\nNow the checkbox is ' + 
       (isChecked? 'checked': 'not checked')); 
     }); 
    } 
} 

dove

var getColumnIndexByName = function(grid, columnName) { 
    var cm = grid.jqGrid('getGridParam', 'colModel'), i, l; 
    for (i = 1, l = cm.length; i < l; i += 1) { 
     if (cm[i].name === columnName) { 
      return i; // return the index 
     } 
    } 
    return -1; 
}; 

Invece del alert è necessario utilizzare jQuery.ajax per inviare informazioni al server sull'aggiornamento dello stato della casella di controllo.

È possibile visualizzare una demo here.

Answer 2

Una piccola correzione in loadComplete: function(). nella demo si può scoprire che anche dopo che la casella di controllo è selezionata, se si fa clic all'esterno della casella di controllo in quella cella, il valore viene modificato in "falso" da "true".

Per evitare questo, è sufficiente dare il focus esattamente sulla casella di controllo facendo quanto segue.

for (i = 1; i < c; i += 1) { 
    $(('input[type="checkbox"]'),rows[i].cells[iCol]).click(function (e) { 
     var id = $(e.target).closest('tr')[0].id, 
      isChecked = $(e.target).is(':checked'); 
     alert('clicked on the checkbox in the row with id=' + id + 
       '\nNow the checkbox is ' + 
       (isChecked? 'checked': 'not checked')); 
    }); 
} 

e grazie per la risposta :-) (@Oleg) mi ha aiutato un momento lot..in ovviamente ..;)

Answer 3

Per modificare i valori di altra colonna sulla base di clic di casella

var weightedAvgPriceIndex = getColumnIndexByName($(this), 'WeightedAveragePrice'), 
    rows = this.rows, 
    i, 
    c = rows.length; 

for (i = 1; i < c; i += 1) { 
    $(('input[type="checkbox"]'),rows[i].cells[iCol]).click(function (e) { 
     var id = $(e.target).closest('tr')[0].id; 
     isChecked = $(e.target).is(':checked'); 
     var x = $('#' + id + ' td:eq(' + weightedAvgPriceIndex + ')').text(); 
     $('#' + id + ' td:eq(' + weightedAvgPriceIndex + ')').text(Math.abs(x) + 10); 
    }); 
}