jqGrid: ¿Es posible realizar un cambio de celda al tabular en lugar de presionar Enter?

Solución:

Para la edición en línea, puede lograr esto de varias maneras. Para vincular un evento onblur al campo de entrada usando el disparador onSelectRow, eliminando la necesidad de editar y guardar botones, haga algo como esto:

  $('#gridId').setGridParam({onSelectRow: function(id){
    //Edit row on select
    $('#gridid').editRow(id, true); 

    //Modify event handler to save on blur.
    var fieldName = "Name of the field which will trigger save on blur.";
    //Note, this solution only makes sense when applied to the last field in a row.
    $("input[id^='"+id+"_"+fieldName+"']","#gridId").bind('blur',function(){
      $('#gridId').saveRow(id);
    });
  }});

Para aplicar un controlador de eventos en vivo jQuery a todas las entradas que pueden aparecer dentro de una fila (jqGrid etiqueta todas las entradas como rowId_fieldName), ejecute un bucle con el número de filas en su cuadrícula y haga algo como esto:

var ids = $("#gridId").jqGrid('getDataIDs');
for(var i=0; i < ids.length; i++){ 
  fieldName = "field_which_will_trigger_on_blur";
  $("input[id^='"+ids[i]+"_"+fieldName+"']","#gridId").live('blur',function(){
    $('#gridId').jqGrid('saveRow',ids[i]);
  });
}

Nota: Para usar desenfoque con .live () como arriba, necesitará jQuery 1.4 o el parche ubicado en: Simulando “foco” y “desenfoque” en el método jQuery .live ()

Tenga cuidado con los rowIds. Cuando empiece a ordenar, agregar y eliminar filas, es posible que se encuentre escribiendo algún jQuery complicado para convertir los identificadores de fila en iRows o números de fila.

Si es como yo y eligió la edición de celda individual, querrá modificar el disparador afterEditCell con algo como:

  $('#gridId').setGridParam({afterEditCell: function(id,name,val,iRow,iCol){
    //Modify event handler to save on blur.
    $("#"+iRow+"_"+name,"#gridId").bind('blur',function(){
      $('#gridId').saveCell(iRow,iCol);
    });
  }});

Espero que ayude..

Esto es bastante horrible, pero es mi opinión sobre este problema, y ​​es probablemente un poco más fácil y más genérico: presiona Enter programáticamente cuando el elemento pierde el foco 🙂

       afterEditCell: function() {
            //This code saves the state of the box when focus is lost in a pretty horrible
            //way, may be they will add support for this in the future

            //set up horrible hack for pressing enter when leaving cell
            e = jQuery.Event("keydown");
            e.keyCode = $.ui.keyCode.ENTER;
            //get the edited thing
            edit = $(".edit-cell > *");
            edit.blur(function() {
                edit.trigger(e);
            });
        },

Agregue ese código a su código de configuración de jqgrid.

Se asume que el último elemento editado es el único que tiene .edit-cell como td principal.

Mi solución fue usar selectores y eventos básicos de jQuery independientemente de la cuadrícula para detectar este evento. Utilizo los eventos en vivo y borrosos en los cuadros de texto de la cuadrícula para capturar el evento. Los dos eventos no se admiten en combinación entre sí, por lo que este truco terminó siendo la solución:

Simulando “enfoque” y “desenfoque” en el método jQuery .live ()

---

---

Utiliza Nuestro Buscador