jqGrid: è possibile commettere un cambio di cella durante la tabulazione, invece di premere Invio?

Question

Ho una semplice modifica in linea nella mia griglia e desidero confermare la modifica quando l'utente rimuove la casella di testo. Il comportamento predefinito di jqGrid costringe l'utente a premere "Invio" per confermare la modifica, ma non è intuitivo per i nostri utenti.

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

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

Ho lavorato la mia strada attraverso gli eventi previsti, ma tutti accadere come conseguenza l'utente premendo 'Invio', che voglio evitare. C'è qualcosa che posso collegare che potrebbe innescare un'azione quando l'utente rimuove questa cella?

Answer 1

La mia soluzione era utilizzare i selettori jQuery di base e gli eventi indipendentemente dalla griglia per rilevare questo evento. Uso gli eventi live e blur sulle caselle di testo nella griglia per catturare l'evento. I due eventi non sono supportati in combinazione tra loro, in modo da questo hack ha finito per essere la soluzione:

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

Answer 2

Perché in linea di editing si possono compiuto questo in diversi modi. Per associare un evento onblur al campo di ingresso utilizzando il grilletto onSelectRow, eliminando la necessità di modificare e salvare i pulsanti, fare qualcosa di simile:

$('#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); 
    }); 
    }}); 

Per applicare un gestore di eventi dal vivo jQuery per tutti gli ingressi che possono apparire all'interno di un fila (jqGrid etichetta tutti gli ingressi come rowId_fieldName), ciclo gettare il numero di righe nella griglia e fare qualcosa di simile:

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: Per utilizzare sfocatura con .Live() come sopra, avrete bisogno di jQuery 1.4 o la patch si trova a: Simulating "focus" and "blur" in jQuery .live() method

Fare attenzione con rowIds. Quando si arriva all'ordinamento, all'aggiunta e alla rimozione di righe, potresti trovarti a scrivere qualche jQuery difficile per convertire gli ID di riga in iRows o numeri di riga.

Se siete come me e si è andato a modificare singola cella, ti consigliamo di modificare il grilletto afterEditCell con qualcosa di simile:

$('#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); 
    }); 
    }}); 

Speranza che aiuta ..

Answer 3

questo è abbastanza orribile, ma è il mio prendere su questo problema, ed è dovuto orientarci un po 'più facile e più generica - si preme Invio a livello di codice quando l'elemento perde lo stato attivo :)

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

Aggiungi che il merluzzo e al tuo codice di configurazione jqgrid.

Si presuppone che l'ultimo elemento modificato sia l'unica cosa con .edit-cell come genitore td.

Answer 4

So che questa domanda è vecchia ma la risposta è obsoleta.

Una variabile globale chiamata lastsel deve essere creata e al codice 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

il seguente aggiunta ho avuto lo stesso problema e ho cercato le risposte di cui sopra.Alla fine sono andato con una soluzione che inserisce una pressione del tasto "Invio" quando l'utente lascia la scheda.

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

Invece di usare 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() è la funzione che convalida i miei dati.