jqGrid con una columna de casilla de verificación editable

Question

Al usar jqGrid, ¿cómo fuerza que una celda se cargue en su vista editable en la carga de la página, así como cuando se hace clic en ella?

Si configura 'edición de celda' como a continuación, la casilla de verificación solo aparece cuando hace clic en la celda.

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

cellEdit:true, 

también al hacer clic en la casilla de verificación, hay una manera de enviar un mensaje al servidor AJAX instante en lugar de tener que depender de que el usuario presione entrar?

Answer 1

Para permitir que las casillas de verificación para estar siempre haga clic-poder, utilice disabled propiedad del formateador casilla:

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

para responder a su segunda pregunta, tendrá que configurar un controlador de eventos para las casillas de verificación, de manera que cuando se hace clic en una función se llama a, por ejemplo, enviar una POST AJAX al servidor. Aquí hay un código de ejemplo para comenzar. Usted puede agregar esto al caso 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

Esta es una vieja pero tiene un montón de vista, así que decidí añadir mi solución aquí también.

Estoy haciendo uso de la función .delegate de JQuery para crear una implementación de enlace tardía que lo liberará de la obligación de utilizar el evento loadComplete.

Apenas añada el siguiente:

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

Esto se unirán tarde que manejador a cada casilla de verificación que está en las filas de la cuadrícula. Puede tener un problema aquí si tiene más de una columna de casilla de verificación.

Answer 3

He compartido un código completo en el siguiente enlace, puede echar un vistazo si lo necesita.

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

Answer 4

que tenían el mismo problema y supongo que he encontrado una buena solución para manejar casilla clic inmediatamente. La idea principal es activar el método editCell cuando el usuario hace clic en la casilla de verificación no editable. Aquí está el código:

 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); 
      } 
    }); 

Excepto esto, usted debe definir los eventos para la cuadrícula:

  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'); 
       } 
      }, 

Entonces su casilla enviará solicitudes de edición cada vez que el usuario hace clic en él.

Answer 5

Tengo una función de envío que envía todas las filas de la cuadrícula al servidor web.

que resuelven este problema utilizando este código:

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

Entonces mezclado con valores de GOT desde el código de abajo.

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

Espero que ayude a alguien.

Answer 6

mejor solución:

<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> 

En su colModel:

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