Guardando cambios en SlickGrid

18

El truco para guardar SlickGrid es darse cuenta de que la cuadrícula actualizará la matriz de datos que proporcionó al crear la cuadrícula a medida que se editan las celdas.

La forma en que guardo eso es incluir un formulario con un botón de envío y un campo oculto debajo de la cuadrícula. Atrapo el evento enviar y uso el JSON plugin para serializar el conjunto y colocarlo en el campo oculto. En el lado del servidor, recibirá una cadena JSON que puede deserializar, recorrer y escribir en la base de datos.

Asumiendo que su conjunto de datos se denomina "datos" como las muestras, lo que sigue debe trabajar para usted:

<form action="?" method="POST"> 
    <input type="submit" value="Save"> 
    <input type="hidden" name="data" value=""> 
</form> 
<script> 
    $(function() { 
    $("form").submit(
     function() { 
     $("input[name='data']").val($.JSON.encode(data)); 
     } 
    ); 
    }); 
</script>

Fuente

2010-07-18 03:43:58

+0

HI Jim, esa es la idea con la que me he ido. Pensé que quizás había otras implementaciones, pero supongo que no. Eso está bien, gracias. – Rubans

+0

Esto me acaba de traer una cuadrícula en blanco después de hacer clic en el botón Guardar. ¿Qué estoy haciendo mal? – randomizertech

+0

Solo quiero agregar que usar el navegador predeterminado ['JSON.stringify'] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) debería estar bien estos días. No es necesario ir a la ruta del complemento jQuery a menos que necesite admitir algunos navegadores realmente antiguos. – user128216

4

Mientras estoy personalmente utilizando la serialización JSON y presentar en un enfoque de campo oculto from my previous answer otra El enfoque podría ser atrapar el evento onCellChange disparado por SlickGrid después de que un valor de celda haya cambiado y hacer una llamada Ajax al servidor para guardar el valor cambiado. Esto dará como resultado muchas pequeñas solicitudes de Ajax al servidor (lo que puede aumentar la carga) pero actualiza el servidor tan pronto como se realicen cambios.

Fuente

2010-07-22 07:19:36

+0

He implementado un ejemplo de esa manera, pero preferiría su primer ejemplo donde se procesan las actualizaciones por lotes, pero puedo ver los beneficios de ambos, definitivamente genial ver que hay al menos alguien más fuera de él;) – Rubans

+0

Prefiero el método por lotes yo mismo , pero pensé que agregaría la otra idea para completar :) –

+0

Mucho mejor y más confiable que el método de lote imo. – EarlyPoster

16

Para completar, un ejemplo mínimo que demuestra el uso de onCellChange, al que se hace referencia en la publicación de Jim OHalloran.

Para obtener más información y ver todos los eventos que se pueden utilizar de forma similar a onCellChange, consulte los comentarios al principio de SlickGrid source.

<head> 
    <!-- boilerplate omitted ... --> 
    <script type="text/javascript"> 
     var grid; 

     var options = { 
      enableCellNavigation: true, 
      enableColumnReorder: false, 
      autoEdit: false, 
      editable: true, 
     }; 

     var columns = [ 
      {id: "item_key", name: "Key", field: "item_key" }, 
      {id: "value", name: "value", field: "value", editor: LongTextCellEditor } 
     ]; 

     var data = [ 
      {item_key: "item1", value: "val1"}, 
      {item_key: "item2", value: "val2"}, 
     ]; 

     $(document).ready(function() { 
      grid = new Slick.Grid($("#myGrid"), data, columns, options); 

     //Earlier code for earlier version of slickgrid 
     // grid.onCellChange = function (currentRow, currentCell, item) { 
     //  alert(currentRow+":"+currentCell+"> key="+item['item_key']+", value="+item['value']); 

      //Updated code as per comment. 
      grid.onCellChange.subscribe(function (e,args) { 
       console.log(args); 
      }); 

      }; 
     }); 
    </script> 

</head> 
<body> 
    <div id="myGrid" style="height:10em;"> </div> 
</body>

Fuente

2010-11-18 21:27:50 lclark

+4

El API para este método ha cambiado ligeramente: 'grid.onCellChange.subscribe (función (E, args) { console.log (argumentos); });' Args es un objeto con la celda, fila el objeto de cuadrícula y el elemento editado. – Solsys

+0

@Iclark ¿Puede explicar cómo apuntaré a una celda específica para una actualización de db? Dado que sus datos son básicamente un par de valores clave donde la clave debe coincidir con el valor de la clave del campo de columna, no veo cómo puedo proporcionar una identificación única de mi elemento de celda para poder hacer coincidir ese elemento con la entidad de base de datos. ¿Cómo puedo pasar la identificación única de mi elemento de celda a donde, cuando realizo la actualización de la base de datos, actualizo solo el elemento de la celda que ha cambiado y no toda la cuadrícula? – Marko

+0

bueno. Usé una implementación de javascript hashtable para recopilar las filas modificadas (http://www.mojavelinux.com/articles/javascript_hashes.html) – Amit

Respuesta

Cuestiones relacionadas