2011-01-26 13 views
6

I utilizando jqGrid con gran éxito de la siguiente manera:Finalización de la edición en jqGrid

  1. Los datos se cargan desde el servidor como JSON
  2. El usuario hacer la edición en línea
  3. Cuando un botón de guardar se hace clic en todos los datos se serializan usando:

    var data = $ ("# mygrid"). getRowData();

    var datajson = JSON.stringify (datos);

El problema con este abordaje es que voy a tener los elementos de entrada en mis JSON-datos si el usuario no ha pulsado retorno o alejado de la celda editada. ¿Hay alguna manera de finalizar el modo de edición i jqgrid?

Respuesta

5

Puede usar saveRow para guardar los datos.

Para usar saveRow, debe conocer la Id. De fila de la fila editable actual. Puede, por ejemplo, guardar el rowid de la edición actual en una variable (antes de llamar al editRow) y usar el valor para llamar al método saveRow.

ACTUALIZADO: ver the demo. Primero seleccione una fila, modifique los valores y luego haga clic en el botón "Guardar fila de edición actual". Verás que los cambios se guardarán.

+0

Lo siento, eso no lo hace. saveRow llama al método para guardar la fila, pero la celda todavía está en modo de edición. – Bebben

+1

@Bebben: cometió un error en su implementación. Agregué la demostración que demuestra que el uso del trabajo 'saveRow'. Si necesita guardar los datos en el servidor en lugar del guardado local, debe usar otros parámetros de 'saveRow': lea exactamente el enlace del' saveRow' que le publiqué. – Oleg

+0

Gracias Oleg! ¡Funciona como un encanto ahora! Creo que el problema fue que tenía mi grilla en celledit, y antes de que pueda llamar a saveRow debo llamar a cellEdit. Ahora comienzo configurando todas las filas en el modo de edición, y antes de enviar la llamada saveRow en todas las filas. ¡Gracias! – Bebben

0

lo he resuelto mediante la activación de "keydown" ENTER evento el elemento:

editoptions: { 
        dataInit: function(elem) { 
         $(elem).datetimepicker({ 
          dateFormat: "yy-mm-dd", 
          onClose: function(datetimeText, datepickerInstance) { 
           $(elem).trigger($.Event("keydown", { keyCode: $.ui.keyCode.ENTER })) 
          } 
         }); 
        } 
       } 
0

Yo uso presento a distancia para cada celda, y como antes "contenteditable" div para el editor de celdas (para el texto de varias líneas), quería terminar la edición de celda con ctrl-enter.

(Basado en la respuesta de Oleg y How to close cell-editor? y http://www.trirand.com/jqgridwiki/doku.php?id=wiki:cell_editing)

$(document).ready(function() { 
    var grid,currentCell; 
    $(".jqGrid_wrapper").on("keydown","div[contenteditable]",function (e) { 
     if (e.ctrlKey && e.keyCode == 13) 
     { 
      grid.jqGrid("saveCell",currentCell.iRow,currentCell.iCol); 
      return false; 
     } 

     return true; 
    }); 
    grid=$("#table_list_2"); 
    grid.jqGrid({ 
     url: ... 
     cellEdit: true, 
     cellsubmit: 'remote', 
     cellurl: '..',  

     beforeEditCell: function(rowid, cellname, value, iRow, iCol) { 
      currentCell={ 
        rowid:rowid, cellname:cellname, value:value, iRow:iRow, iCol:iCol 
      } 
     }    
    }); 
}); 
Cuestiones relacionadas