Données SlickGrid AJAX

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

1. Copier le contenu de example6-ajax-loading.html (dans le SlickGrid télécharger) dans votre fichier html - appelons-la mygrid.html (Ou dans votre code qui génère du code html. Dans mon cas, j'utilise CodeIgniter, j'ai donc copié dans mygrid_view.php).

2. Copie slick.remotemodel.js pour yourRemoteModel.js.

3. "Mygrid.html" assurez-vous que vous avez le bon chemin d'accès à tous les fichiers javascript. Changement slick.remotemodel.js pour yourRemoteModel.js. Éliminer tous les doublons de scripts - par exemple, si vous êtes déjà en tirant dans une version récente de jQuery puis éliminer la ligne "mygrid.html" qui tire dans jquery-1.4.3.min.js.

4. "Mygrid.html" changer l'initialisation des "colonnes" de la variable pour faire correspondre les données que vous voulez afficher dans votre base de données. Attention à la propriété de champ. Ce doit être en accord avec les noms de propriété qui sera renvoyée dans la réponse JSON à partir de votre serveur. (*voir la note à ce sujet à la fin).

5. Dans yourRemoteModel.js, modifiez la variable d'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="+fromPage+"&rows="+(((toPage - fromPage) * PAGESIZE) + PAGESIZE);

6. Dans yourRemoteModel.js, changer le jsonp appel à ajax - sauf si vous avez besoin pour ce faire inter-domaine, dans ce cas, vous aurez envie de 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 yourRemoteModel.js vous devez maintenant personnaliser le onSuccess() fonction. Suivre le modèle de l'exemple, la définition de de et à soit l'entier des décalages dans les enregistrements de données, les données de réglage.la longueur de la nombre total d'enregistrements, et de définir ensuite le tableau de données. Ce code dépend de la réponse JSON à partir de votre serveur ressemble.

8. Maintenant écrire le code sur le serveur pour générer la réponse JSON. Comme vous pouvez le voir à partir de l'étape 7, ceci doit inclure l'enregistrement (ou la page) décalage dans les données, et une indication de la façon dont de nombreux dossiers sont à retourner, 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 le "champ" paramètre dans vos définitions de colonne (à partir de l'étape 4 ci-dessus). Jetez un oeil à 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 qui devrait le faire!

*Note: dans mon cas, je ne voulais pas utiliser la bande passante pour le retour de tous ces noms de propriété répété pour chaque enregistrement de la réponse JSON, donc à la place je retourner un tableau des valeurs de l'enregistrement. Je puis définissez la propriété de champ dans la colonne description (étape 4 ci-dessus) pour être un entier décalage dans ce tableau. Ainsi, dans les descriptions de la colonne, au lieu de: "someFieldName", j'ai utiliser le champ:3, puis dans ma télécommande modèle, onSuccess() fonction je suis de données[de+i] = resp.record[i].de données (où .de données 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 peut-être plus difficiles à déboguer si quelque chose se passe mal).

1. Ajouter une classe pour les colonnes que vous souhaitez lier avec l'ajax
2. Ajouter un événement onRenderCompleted
3. utiliser la classe en tant que sélecteur et ajoutez les choses comme les autres DOM elementent à l'intérieur de onRenderCompleted fonction