SlickGrid AJAX data

je suis juste allé à travers, alors voici comment j'ai fait:

1. copier le contenu de l'exemple 6-ajax-loading.html (dans le téléchargement de SlickGrid) dans votre fichier html - appelons-le mygrid.html (ou dans votre code qui génère html. Dans mon cas, J'utilise CodeIgniter, donc j'ai copié dans mygrid_view.php).

2. Copier slick.remotemodel.js pour yourRemoteModel.js.

3. Dans "mygrid.html " assurez-vous que vous avez le bon chemin vers tous les les fichiers javascript. Changement nappe.remotemodel.js pour yourRemoteModel.js. Éliminez les scripts dupliqués - pour exmaple, si vous utilisez déjà une version récente de jQuery, supprimez la ligne dans "mygrid.html" qui tire dans jquery-1.4.3.min.js.

4. Dans "mygrid.html", modifiez l'initialisation de la variable 'columns' pour faire correspondre les données que vous voulez afficher à partir de votre base de données. Attention à la propriété de champ. Cela doit concorder avec les noms de propriété qui doit être renvoyé dans la réponse JSON à partir de votre serveur. (*voir la note à ce sujet à la fin).

5. dans votre modèle remotemodelé.js, changez la variable url pour pointer vers votre serveur, en passant les arguments appropriés. Dans mon cas, je passe de la page et les lignes de paramètres de mon serveur comme ceci:

   var url = myServerUrl+"?page= "+frumpage+ "&rows= " +(((toPage-frumpage) * PAGESIZE) + PAGESIZE);

6. dans votre modèle remotemodelé.js, change l'appel de jsonp en ajax. - sauf si vous avez besoin de faire ce cross-domaine, auquel cas vous voulez rester avec jsonp, sinon vous pouvez le changer pour ressembler à ceci:

           req = $.ajax({
               url: url,
               dataType: 'json',
               success: onSuccess,
               error: function(){
                   onError(fromPage, toPage)
               }
               });
   

7. dans votre modèle remotemodelé.js, vous devez maintenant personnaliser la fonction onSuccess (). Suivre le modèle de l'exemple, la configuration de et soit l'entier des décalages dans les enregistrements de données, les données de réglage.la longueur doit être le nombre total d'enregistrements, puis la définition du tableau de données. Ce code est dépendant sur ce à quoi ressemble la réponse JSON de votre serveur.

8. maintenant, écrivez le code sur le serveur pour générer la réponse JSON. Comme vous pouvez le voir à l'étape 7, cela doit inclure l'enregistrement (ou la page) décalé dans les données, et une indication du nombre d'enregistrements sont retournés, ainsi qu'un tableau des enregistrements eux-mêmes. Rappelez-vous que chaque champ de chaque enregistrement doit avoir un nom de propriété qui correspond au paramètre 'Champ' dans vos définitions de colonne (de l'étape 4 ci-dessus). Regardez la réponse de Digg comme un exemple:

http://services.digg.com/search/stories?query=apple&offset=0&appkey=http://slickgrid.googlecode.com&type=javascript&callback=cb

Et ça devrait le faire!

* Note: dans mon cas je ne voulais pas utiliser la bande passante pour retourner tous les noms de propriétés répétés pour chaque enregistrement dans la réponse JSON, donc à la place je renvoie un tableau des valeurs d'enregistrement. J'ai ensuite définir le champ propriété dans la description de la colonne (étape 4 ci-dessus) pour être un décalage d'entier dans ce tableau. Ainsi, dans les descriptions des colonnes, au lieu de field: 'someFieldName", j'utilise field:3, puis dans mon model distant, la fonction onSuccess () je règle les données[à partir de+i] = resp.record[i].de données (où .data est un tableau dans la réponse JSON des valeurs de champ dans l'enregistrement). Jusqu'à présent, cela semble bien fonctionner pour moi (mais pourrait être plus difficile à contester si quelque chose tourne mal).

Voir ce pull request un exemple de stockage de données AJAX fonctionnel utilisant maintenant HackerNews au lieu de Digg. Vous pouvez télécharger ce Slickgrid et regardez l'exemple 6-ajax-loading.

Voici d'importantes observations sur la pagination + ajax+slickgrid:Google Groups: SlickGrid Pagination + Ajax + DataView

1. ajouter une classe aux colonnes que vous voulez lier avec ajax
2. Ajout d'une onRenderCompleted événement
3. Utilisez la classe comme sélecteur et ajoutez la substance comme les autres éléments DOM à l'intérieur de la fonction onRenderCompleted

il ajoute un joli petit serveur Python local pour fournir le backend AJAX

git clone git@github.com:harbulot/SlickGrid.git
cd SlickGrid/
python localajaxserver.py

alors allez à http://127.0.0.1:8000/examples/example6b-ajax-localserver.html avec votre navigateur.

regardez la requête Pull pour voir ce qui a été changé https://github.com/harbulot/SlickGrid/compare/mleibman:master...url_builder