Navegación de la tecla Entrar y tabular similar a Excel en la edición de celda

Question

una pregunta para todos los avanzados en jqgrid.

tengo que codificar este caso de uso:

En jqGrid hay dos columnas editables. Tengo que usar la edición de la celda. El usuario hace clic en una celda editable y cuando presiona 'Introducir la clave', selecciono la siguiente celda editable BAJO la actual.

De lo contrario, cuando se golpea 'pestaña' clave, selecciono siguiente celda editable

• si la celda actual es pasado, me puse la celda editable más cercano en la siguiente línea o
• si no, selecciono la siguiente celda editable en la fila actual.

en resumen, necesito un comportamiento exacto como en excel.

si tuviera una mejor reputación, podría haber subido una imagen para demostrar la situación deseada.

muchas gracias.

Answer 1

Ahoj!

Para unir una celda editable a su controlador de eventos personalizado hay una configuración común en jqGrid: dataEvents propiedad de editoptions. Absolutamente the same settings existe para la búsqueda en jqGrid. Puede encontrar algunos ejemplos de código here, here y here. Probablemente necesite usar cell editing methods dentro del controlador de eventos de teclado para poder finalizar la edición de una celda y comenzar la edición de otra.

Si tiene problemas en la implementación, puede agregar su pregunta con el ejemplo de código y luego puede intentar modificarla.

Answer 2

su respuesta me ayuda mucho y me dirige a la solución correcta, aunque me pasé más de 3 horas para escribir código correcto, pero me las arreglé esta :)

muchas gracias.

para resumir:

definí 2 variables:

var selICol; //iCol of selected cell 
var selIRow; //iRow of selected cell 

i colocó en beforeEditCell eventos:

beforeEditCell : function(rowid, cellname, value, iRow, iCol) 
{ 
    selICol = iCol; 
    selIRow = iRow; 
}, 

y luego en editoptions tanto editable células que configuro:

primera celda editable en la fila (Inventúrny Stav en la imagen), el comportamiento en la pestaña de prensa para seleccionar el siguiente celda editable por defecto es

editoptions: { 
    dataInit : function (elem) { $(elem).focus(function(){ this.select();}) }, 
    dataEvents: [ 
     { 
      type: 'keydown', 
      fn: function(e) { 
       var key = e.charCode || e.keyCode; 
       if (key == 13)//enter 
       { 
        setTimeout("jQuery('#inventuraGrid').editCell(" + selIRow + " + 1, " + selICol + ", true);", 100); 
       } 
      } 
     } 
    ] 
} 

segunda celda editable en la fila (Sklad. Cena en la imagen) - i ajustar manualmente iCol para la siguiente celda editable en la siguiente fila

editoptions: { 
    dataInit : function (elem) { $(elem).focus(function(){ this.select();}) }, 
    dataEvents: [ 
     { 
      type: 'keydown', 
      fn: function(e) { 
       var key = e.charCode || e.keyCode; 
       if(key == 9) // tab 
       { 
        setTimeout("jQuery('#inventuraGrid').editCell(" + selIRow + " + 1, 4, true);", 100); 
       } 
       else if (key == 13)//enter 
       { 
        setTimeout("jQuery('#inventuraGrid').editCell(" + selIRow + " + 1, " + selICol + ", true);", 100); 
       } 
      } 
     } 
    ] 
} 

Answer 3

me di cuenta que es un viejo tema, pero recientemente he luchado con esto y pensé que podría compartir el enfoque que trabajó para me:

jQuery('#grid').jqGrid({ 
    ..., 
    cellEdit: true, // Make sure we are using cell edit 
    afterEditCell: function(rowid, cellname, value, iRow, iCol) { 

    // Get a handle to the actual input field 
    var inputControl = jQuery('#' + (iRow) + '_' + cellname); 

    // Listen for enter (and shift-enter) 
    inputControl.bind("keydown",function(e) { 

     if (e.keyCode === 13) { // Enter key: 
     var increment = e.shiftKey ? -1 : 1; 

     // Do not go out of bounds 
     var lastRowInd = jQuery("#grid").jqGrid("getGridParam","reccount") 
     if (iRow+increment == 0 || iRow+increment == lastRowInd+1) 
      return; // we could re-edit current cell or wrap 
     else 
      jQuery("#grid").jqGrid("editCell",iRow+increment,iCol,true); 
     } 
    }); // End keydown binding 
    }) 
}); // End jqGrid initialization 

me ocurrió con este enfoque después de leer cómo editCell ofertas función de jqGrid con pestaña y especificar las claves durante una operación de edición. El encuadernado con la tecla de jqGrid debe dispararse primero, seguido por este. Este código simplemente le dice que comience una edición en la siguiente fila después de procesar el manejador de ENTER de jqGrid. Funciona exactamente igual que la pestaña ahora, manteniendo abierto el control de edición.

Nunca pude descifrar por completo la editoptions: {dataEvents: ...} estructura, por lo que podría ser un mejor enfoque. Si es así, no dude en explicar cómo es superior.

Answer 4

{ 
    type: 'keydown', 
    fn: function(e) { 
     var key = e.charCode || e.keyCode; 
     //TAB 
     if(key == jq.ui.keyCode.TAB) { 
      setTimeout(function() { 
       jq('#' + currentRowId + '_nextColName').focus(); 
       jq('#' + currentRowId + '_nextColName').select(); 
      }, 500); 
     } 
     //ENTER 
     else if (key == jq.ui.keyCode.ENTER) { 
      var nextRow = parseInt(currentRowId) + 1; 
      jq('#' + currentRowId + '_thisColName').blur(); 
      jq('#' + nextRow + '_firstColName').select(); 
     } 
    } 
}