Javascript Girl
  1. Javascript Girl
  3. Économiser des modifications dans SlickGrid
Intereting Posts
Faites défiler jusqu'à la section par section Comment puis-je sérialiser une fonction en JavaScript? Résultat de la variable de référence dans la méthode Collections.where dans la fonction de rendu Créer une structure arborescente Impossible d'appeler test () Comment charger dll à partir du dossier de données addon SDK? IE8 jQuery FadeTo Pourquoi cette variable javascript que je crée via C # ne peut être mise à jour qu'une seule fois? Des collisions lors de la génération d'UUID en JavaScript? Videz le premier élément dans la liste déroulante JavaScript promet alors () commande Pourquoi la valeur de typeof null change-t-elle dans une boucle? Comment lier un gestionnaire à un changement de sélection sur la fenêtre? Javascript setinterval avec temps aléatoire Si les gens recommandent, je ne devrais pas utiliser .innerHTML, alors qu'est-ce que je devrais plutôt utiliser?

Économiser des modifications dans SlickGrid

HI, je regarde SlickGrid et je peux voir un exemple sur la façon de modifier la cellule, mais je sauvegarde ces modifications. Je n'ai pas encore trouvé un exemple qui me dit comment faire.

    Le truc pour sauver 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 lorsque les cellules sont modifiées.

    La façon dont je sauvegarde ensuite cela consiste à inclure un formulaire avec un bouton de soumission et un champ caché sous la grille. Je piéger l'événement de soumission et utiliser le plugin JSON 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, passer à travers et écrire sur la base de données.

    En supposant que votre gamme de données s'appelle "données" comme les échantillons, les éléments suivants devraient 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 l'exhaustivité, un exemple minimal démontrant l'utilisation de onCellChange, mentionné dans la publication de Jim OHalloran.

    Pour plus d'informations et pour voir tous les événements pouvant être utilisés de manière similaire à onCellChange, consultez les commentaires au début de la source 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>

    Bien que j'utilise personnellement la sérigraphie JSON et que je soumette dans une approche de champ caché de 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 cellule a changé et faire un appel Ajax au serveur pour enregistrer le changement valeur. Cela entraînera de nombreuses petites requêtes Ajax au serveur (ce qui peut augmenter la charge) mais met à jour le serveur dès que des modifications sont apportées.