javascript - clusterize - slick grid js
Guardando cambios en SlickGrid (3)
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 de envío y uso el complemento JSON para serializar la matriz y colocarla en el campo oculto. En el lado del servidor, recibirá una cadena JSON que puede deserializar, recorrer y escribir en la base de datos.
Suponiendo que su matriz de datos se denomina "datos" como las muestras, lo siguiente debería funcionar 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>
Hola, estoy viendo SlickGrid y puedo ver un ejemplo sobre cómo editar la celda, sin embargo, guardo estos cambios. Todavía tengo que encontrar un ejemplo que me diga cómo hacer esto.
Para completar, un ejemplo mínimo que demuestra el uso de onCellChange, mencionado en la publicación de Jim OHalloran.
Para obtener más información y para ver todos los eventos que se pueden utilizar de manera similar a onCellChange, vea los comentarios al principio de la fuente SlickGrid .
<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>
Si bien estoy usando personalmente el JSON serializar y enviar en un enfoque de campo oculto de mi respuesta anterior, otro enfoque podría ser atrapar el evento onCellChange desencadenado por SlickGrid después de que un valor de celda haya cambiado y realizar una llamada Ajax al servidor para guardar el cambio. valor. Esto dará como resultado un montón de pequeñas solicitudes de Ajax al servidor (lo que puede aumentar la carga) pero actualiza el servidor tan pronto como se realizan los cambios.