Enregistrement des modifications dans SlickGrid
Salut, Je regarde SlickGrid et je peux voir un exemple sur la façon d'éditer la cellule, cependant dois-je enregistrer ces changements. Je n'ai pas encore trouver un exemple qui me dit comment faire.
3 réponses
l'astuce pour sauvegarder le SlickGrid est de réaliser que la grille mettra à jour le tableau de données que vous avez fourni lors de la création de la grille pendant que les cellules sont éditées.
La façon dont je puis enregistrez c'est d'inclure un formulaire avec un bouton et un champ caché en dessous de la grille. Je piège l'événement submit et j'utilise le JSON plugin pour sérialiser le tableau et le placer dans le champ caché. Du côté du serveur, vous recevrez une chaîne JSON que vous pouvez désérialiser, et écrire dans la base de données.
en supposant que votre tableau de données s'appelle "data" comme les samples, ce qui suit devrait fonctionner pour vous:
<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>
pour être complet, un exemple minimal démontrant l'usage de onCellChange, mentionné dans le post de Jim OHalloran.
pour plus d'informations, et pour voir tous les événements qui peuvent être utilisés de la même manière qu'onCellChange, voir les commentaires au début de la 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>
alors que j'utilise personnellement la serialize JSON et soumettre dans une approche de champ caché dans ma réponse précédente une autre approche pourrait être de piéger l'événement onCellChange déclenché par SlickGrid après qu'une valeur de la cellule a changé et faire un appel Ajax au serveur pour sauver la valeur changée. Il en résultera beaucoup de petites requêtes Ajax vers le serveur (ce qui peut augmenter la charge) mais met à jour le serveur dès que des modifications sont apportées.