jqGrid: ¿Es posible confirmar un cambio de celda al tabular en lugar de presionar Entrar?

Question

Tengo una edición simple en línea en mi cuadrícula, y quiero confirmar el cambio cuando el usuario selecciona el cuadro de texto. El comportamiento predeterminado de jqGrid obliga al usuario a presionar 'Enter' para confirmar el cambio, pero esto no es intuitivo para nuestros usuarios.

alt text http://i32.tinypic.com/e62iqh.jpg

onSelectRow: function(id) { 
     $(gridCoreGroups).editRow(id, true, undefined, function(response) 
     { 
       alert("hello world"); 
     } 
    } 

he trabajado mi camino a través de los eventos previstos, sino que todo suceda como resultado de que el usuario presione 'Enter', lo que quiero evitar. ¿Hay algo que pueda cablear que desencadene una acción cuando el usuario selecciona esta celda?

Answer 1

Mi solución fue utilizar selectores jQuery básicos y eventos independientemente de la cuadrícula para detectar este evento. Uso los eventos en vivo y desenfoque en los cuadros de texto en la cuadrícula para capturar el evento. Los dos eventos no son compatibles en combinación con otros, por lo que este truco terminó siendo la solución:

Simulating "focus" and "blur" in jQuery .live() method

Answer 2

Para la edición en línea se puede logrado esto varias maneras. Para enlazar un evento onBlur al campo de entrada mediante el disparador onSelectRow, lo que elimina la necesidad de editar y guardar los botones, hacer 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 directo jQuery para todas las entradas que pueden aparecer dentro de una fila (jqGrid las etiquetas de todos los insumos como rowId_fieldName), bucle de tirar la cantidad de filas de la parrilla y hacer 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 utilizar desenfoque con .live() como el anterior, se le necesita jQuery 1.4 o el parche ubicado en: Simulating "focus" and "blur" in jQuery .live() method

Tenga cuidado con rowIds. Cuando entres en ordenar, agregar y eliminar filas, es posible que te encuentres escribiendo jQuery complicado para convertir identificadores de fila en iRows o números de fila.

Si eres como yo y se fue con edición célula individual, tendrá que modificar el gatillo 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 ..

Answer 3

Esto es bastante horrible, pero su mi opinión sobre este problema, y ​​es prob un poco más fácil y más genérico - presiona entrar en programación 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); 
      }); 
     }, 

añadir que el bacalao e a su código de configuración jqgrid.

Supone que el último elemento editado es lo único con .edit-cell como td principal.

Answer 4

Sé que esta pregunta es antigua, pero la respuesta está desactualizada.

Una variable global llamada finSel debe ser creado y añadido lo siguiente al código jqGrid

onSelectRow: function (id) { 
      if (!status)//deselected 
      { 
       if ($("tr#" + lastsel).attr("editable") == 1) //editable=1 means row in edit mode 
        jQuery('#list1').jqGrid('saveRow', lastsel); 
      } 
      if (id && id !== lastsel) { 
       jQuery('#list1').jqGrid('restoreRow', lastsel); 
       jQuery('#list1').jqGrid('editRow', id, true); 
       lastsel = id; 
      } 
     }, 

Answer 5

que tenía el mismo problema y trate las respuestas anteriores.Al final fui con una solución que inserta una tecla "Enter" cuando el usuario abandona la pestaña.

// Call this function to save and unfinished edit 
// - If an input exists with the "edit-call" class then the edit has 
// not been finished. Complete the edit by injecting an "Enter" key press 
function saveEdits() { 
    var $input = $("#grid").find(".edit-cell input"); 
    if ($input.length == 1) { 
     var e = $.Event("keydown"); 
     e.which = 13; 
     e.keyCode = 13; 
     $input.trigger(e); 
    } 
} 

Answer 6

En lugar de utilizar selectRow uso CellSelect.

onCellSelect: function (row, col, content, event) { 
    if (row != lastsel) { 
      grid.jqGrid('saveRow', lastsel); 
      lastsel = row; 
     }   
     var cm = grid.jqGrid("getGridParam", "colModel"); 
     //keep it false bcoz i am calling an event on the enter keypress 
     grid.jqGrid('editRow', row, false); 

     var fieldName = cm[col].name; 
     //If input tag becomes blur then function called. 
      $("input[id^='"+row+"_"+fieldName+"']","#gridId").bind('blur',function(e){ 
       grid.jqGrid('saveRow', row); 
       saveDataFromTable(); 
     }); 

     //Enter key press event. 
     $("input[id^='"+row+"_"+fieldName+"']","#gridId").bind('keypress',function(e){ 
      var code = (e.keyCode ? e.keyCode : e.which); 
      //If enter key pressed then save particular row and validate. 
      if(code == 13){ 
       grid.jqGrid('saveRow', row); 
       saveDataFromTable(); 
      } 
     }); 
    } 

// saveDataFromTable() es la función que valida mis datos.