jqGrid con una colonna di casella modificabile

Question

Quando si utilizza jqGrid, come si forza a caricare una cella nella visualizzazione modificabile sul caricamento della pagina e quando viene fatto clic?

Se si imposta "Modifica cella" come di seguito, la casella di controllo viene visualizzata solo quando si fa clic sulla cella.

{ name: 'MyCol', index: 'MyCol', editable:true, edittype:'checkbox', editoptions: { value:"True:False" }, 

cellEdit:true, 

anche facendo clic su casella di controllo, c'è un modo di inviare un post AJAX al server immediatamente piuttosto che dover fare affidamento su l'utente preme entrare?

Answer 1

Per consentire le caselle di essere sempre click-in grado, utilizzare disabled proprietà del formattatore casella di controllo:

{ name: 'MyCol', index: 'MyCol', 
    editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, 
    formatter: "checkbox", formatoptions: {disabled : false} , ... 

Per rispondere alla tua seconda domanda, si dovrà impostare un gestore di eventi per le caselle di controllo, in modo che quando si fa clic su una funzione, ad esempio, si invia un POST AJAX al server. Ecco alcuni esempi di codice per iniziare. È possibile aggiungere questa all'evento loadComplete:

// Assuming check box is your only input field: 
    jQuery(".jqgrow td input").each(function(){ 
     jQuery(this).click(function(){ 
      // POST your data here... 
     }); 
    }); 

Answer 2

Questo è un vecchio ma ha un sacco di vista così ho deciso di aggiungere la mia soluzione anche qui.

Sto facendo uso della funzione .delegate di JQuery per creare un'implementazione di associazione tardiva che ti libererà dall'obbligo di utilizzare l'evento loadComplete.

Basta aggiungere il seguente:

$(document).delegate('#myGrid .jqgrow td input', 'click', function() { alert('aaa'); }); 

Ciò tardi legano che gestore per ogni casella di controllo che è sulle righe della griglia. Potresti avere un problema qui se hai più di una colonna di checkbox.

Answer 3

Avevo condiviso un codice completo al link sottostante, puoi dare un'occhiata se ne hai bisogno.

http://www.trirand.com/blog/?page_id=393/bugs/celledit-checkbox-needs-an-enter-pressed-for-saving-state/#p23968

Answer 4

Ho avuto lo stesso problema e suppongo che ho trovato una buona soluzione per gestire immediatamente casella di clic. L'idea principale è di attivare il metodo editCell quando l'utente fa clic sulla casella di controllo non modificabile. Ecco il codice:

 jQuery(".jqgrow td").find("input:checkbox").live('click', function(){ 
      var iRow = $("#grid").getInd($(this).parent('td').parent('tr').attr('id')); 
      var iCol = $(this).parent('td').parent('tr').find('td').index($(this).parent('td')); 
      //I use edit-cell class to differ editable and non-editable checkbox 
      if(!$(this).parent('td').hasClass('edit-cell')){ 
            //remove "checked" from non-editable checkbox 
       $(this).attr('checked',!($(this).attr('checked'))); 
         jQuery("#grid").editCell(iRow,iCol,true); 
      } 
    }); 

Tranne questo, è necessario definire gli eventi per la griglia:

  afterEditCell: function(rowid, cellname, value, iRow, iCol){ 
      //I use cellname, but possibly you need to apply it for each checkbox  
       if(cellname == 'locked'){ 
       //add "checked" to editable checkbox 
        $("#grid").find('tr:eq('+iRow+') td:eq('+iCol+') input:checkbox').attr('checked',!($("#regions").find('tr:eq('+iRow+') td:eq('+iCol+') input:checkbox').attr('checked'))); 
          //trigger request 
        jQuery("#grid").saveCell(iRow,iCol); 
       } 
      }, 

      afterSaveCell: function(rowid, cellname, value, iRow, iCol){ 
       if(cellname == 'locked'){ 
        $("#grid").find('tr:eq('+iRow+') td:eq('+iCol+')').removeClass('edit-cell'); 
       } 
      }, 

Allora la vostra casella di controllo invierà modificare le richieste ogni volta quando l'utente fa clic su di esso.

Answer 5

Ho una funzione di invio che invia tutte le righe della griglia al server web.

ho risolto questo problema utilizzando questo codice:

var checkboxFix = []; 
$("#jqTable td[aria-describedby='columnId'] input").each(function() { 
     checkboxFix.push($(this).attr('checked')); 
}); 

Poi ho mescolato con i valori ottenuto dal codice qui sotto.

$("#jqTable").jqGrid('getGridParam', 'data'); 

Spero che aiuti qualcuno.

Answer 6

Soluzione migliore:

<script type="text/javascript"> 
    var boxUnformat = function (cellvalue, options, cell) { return '-1'; }, 
     checkboxTemplate = {width:40, editable:true, 
      edittype: "checkbox", align: "center", unformat: boxUnformat, 
      formatter: "checkbox", editoptions: {"value": "Yes:No"}, 
      formatoptions: { disabled: false }}; 
    jQuery(document).ready(function($) {   
     $(document).on('change', 'input[type="checkbox"]', function(e){ 
      var td = $(this).parent(), tr = $(td).parent(), 
       checked = $(this).attr('checked'), 
       ids = td.attr('aria-describedby').split('_'), 
       grid = $('#'+ids[0]), 
       iRow = grid.getInd(tr.attr('id')); 
       iCol = tr.find('td').index(td); 
      grid.editCell(iRow,iCol,true); 
      $('input[type="checkbox"]',td).attr('checked',!checked); 
      grid.saveCell(iRow,iCol); 
     }); 
    }); 
</script> 

Nel vostro colModel:

... 
{name:'allowAccess', template: checkboxTemplate}, 
...