Doit-on remplacer l'utilisation addJSONData de jqGrid par l'utilisation de setGridParam () et trigger ('reloadGrid')?

Question

J'ai écrit récemment une réponse à la question "jqGrid l'affichage par défaut de message "chargement" lors de la mise à jour d'une table / sur commande de mise à jour". Alors que la rédaction de la réponse, j'ai pensé: pourquoi n'a-t-il les addJSONData() de la fonction pour l'actualisation des données dans la grille au lieu de changer l'URL à l'égard de setGridParam() et rafraîchissant jqGrid données vis à vis de trigger('reloadGrid')? Au début je voulais vous recommandons d'utiliser 'reloadGrid', mais après réflexion sur ce que j'ai compris que je ne suis pas tout à fait sûr de ce que le meilleur moyen est. Au moins, je ne peux pas l'expliquer en deux phrases pourquoi je préfère la seconde. J'ai donc décidé qu'il pourrait être un intéressant sujet de discussion.

Donc, pour être exact: Nous avons une situation typique. Nous avons une page web avec au moins un jqGrid et quelques autres contrôles comme le combo-box (sélectionne), cases à cocher, etc. qui donnent à l'utilisateur des possibilités de modifier la portée de l'information affichée dans un jqGrid. Généralement, on définit des gestionnaire d'événements comme jQuery("#selector").change(myRefresh).keyup(myKeyRefresh) et nous avons besoin de recharger la jqGrid conteneur en fonction de l'utilisateur du choix.

Après la lecture et l'analyse de l'information supplémentaire de la saisie de l'utilisateur, nous pouvons actualiser la jqGrid conteneur de deux façons au moins:

1. Faire un appel d' $.ajax() manuel puis à l'intérieur de la réussite ou de l'complet de poignée d' $.ajax appel jQuery.parseJSON() (ou eval) et ensuite appeler addJSONData fonction de jqGrid. J'ai trouvé beaucoup d'exemples sur stackoverflow.com qui utilisent addJSONData.
2. Mise à jour de l'url de jqGrid basée sur la saisie de l'utilisateur, réinitialiser les page numéro 1 et éventuellement modifier la légende de la grille. Tous ces éléments peuvent être faits à l'égard de setGridParam(), et éventuellement setCaption() jqGrid méthodes. À la fin de l'appel de la grille trigger('reloadGrid') de la fonction. Pour construire l' url, par la façon dont j'utilise principalement jQuery.param fonction pour être sûre, j'ai tous les paramètres d'url emballé correctement par rapport à encodeURIComponent.

J'aimerais que nous discutons les avantages et les inconvénients des deux façons. J'utilise actuellement la deuxième façon, donc je vais commencer avec des avantages de celui-ci.

On peut dire: j'ai appel de Service Web, convertir les données reçues à l'jqGrid format et appel addJSONData. C'est la raison pour laquelle j'utilise addJSONData méthode!

OK, je vais choisir une autre voie. jqGrid pouvez faire un appel sur le Web directement le Service et remplissez les résultats à l'intérieur de la grille. Il y a beaucoup de jqGrid options qui vous permettent de personnaliser ce processus.

Tout d'abord, on peut supprimer ou renommer les paramètres standard envoyé au serveur à l'égard de la prmNames option de jqGrid ou plus ajouter des paramètres supplémentaires à l'égard de la postData option (voir http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options). On peut modifier tous construits paramètres immédiatement avant jqGrid fait la correspondante $.ajax demande par la définition de la serializeGridData() fonction (une option de plus de jqGrid). De plus, on peut changer chaque $.ajax paramètre par paramètre le ajaxGridOptions option de jqGrid. J'utilise ajaxGridOptions: {contentType: "application/json"} par exemple en tant que cadre général de l' $.jgrid.defaults. Le ajaxGridOptions option est très puissant. À l'égard de la ajaxGridOptions option, on peut redéfinir tous les paramètres, de l' $.ajax demande d'envoi par jqGrid, comme d'erreur, complète et beforeSend événements. Je vois potentiellement intéressante pour définir dataFilter événement pour être en mesure de faire une quelconque modification de la ligne de données retournées par le serveur.

Un argument de plus pour l'utilisation du trigger('reloadGrid') moyen est le blocage de jqGrid au cours de l'AJAX traitement de la demande. Je vais surtout utiliser le paramètre loadui: 'block' pour bloquer jqGrid pendant JSON demande l'envoi au serveur. À l'égard de jQuery plugin blockUI http://malsup.com/jquery/block/ on peut bloquer plus de pièces de page web, comme la grille. Pour ce faire, on peut demander:

jQuery('#main').block({ message: '<h1>Die Daten werden vom Server geladen...</h1>' });

avant d'appeler le trigger('reloadGrid') méthode et jQuery ('#(principal)").débloquer() à l'intérieur de la loadComplete et loadError fonctions. Le loadui option pourrait être réglé sur "disable" dans ce cas.

Et ma dernière remarque: j'ai Surtout utilisé pour créer des jqGrid avec le type de données défini à 'locale' au lieu de 'json' et je voudrais appeler le déclencheur ("changement") la fonction de certains contrôles (l'une des zones de liste modifiables) comme: jQuery("#selector").change(myRefresh).keyup(myKeyRefresh).trigger('change'). J'ai donc construire l' url le paramètre de jqGrid seulement dans un lieu à l'intérieur de la modifier gérer et de modifier le type de données à 'json' à l'intérieur de l'décrit ci-dessus setGridParam().

Donc je ne vois pas pourquoi la fonction addJSONData() doit être utilisé.

Peut quelqu'un qui utilise addJSONData() fonction m'expliquer les avantages de son utilisation?

Pour être juste je peux ajouter que addJSONData() qui n'existe que dans les anciennes versions de jqGrid comme ayant la plupart des fonctionnalités qui je décris ici. Doit-on remplacer l'utilisation de addJSONData de jqGrid à l'utilisation de setGridParam(), et trigger('reloadGrid')?

Answer 1

J'ai été en utilisant addJSONData avec jqgrid, mais c'était il y a 1 an, beaucoup de choses ont changé depuis ce temps dans jqGrid.

De toute façon, j'avais besoin d'lourd et complexe gui de manipulation sur le côté client (banque de faire la part des choses), mes données Json était en local uniquement et envoyées au serveur que certains jkey point (travail terminé). J'ai eu plusieurs jqgrid (certains d'entre eux à l'intérieur d'autres jqgrids :-) ) et une sorte de navigateur local de stockage de données qui est assez petit pour rester dans le navigateur et complexe et en mouvement assez pour être inutilisable dans un temps raisonnable via ajax IO.

La première version ont été à l'aide d'Ajax IO, lorsque j'ai été frappé par l'écluse et d'attendre que les problèmes et par le montant du nouveau complexe GUI choses à venir, j'ai été très heureux de trouver cette addJSONData crochet et d'avoir mon propre ajax montage à l'extérieur de jQgrid.

Answer 2

La facilité de la construction de la grille / données à partir d'un serveur. L'une des raisons principales que j'utilise JSON, c'est que son petit alors XML, et fonctionne très bien sur le serveur (PHP) et le client (JS) de côté. Et comme un résultat, je normalisée (et je sais que plusieurs ne) de transmission de données entre JSON.

Par conséquent, addJSONData fournit un moyen facile à mettre à jour en permanence toutes les données dans la grille, et de les afficher d'un seul coup. Son rapide, rapide, sale, et ça fonctionne.

Mais personnellement, ce sera le taux de participation à être une mauvaise idée sur le long terme, avec de grandes datagrid constamment rafraîchir. Et c'est là que les mises à jour spécifiques des cellules, des colonnes, après la période initiale de l'obtenir, est une bien meilleure idée d'avoir 2 appels. Présenter la grille de changement de serveur, et d'obtenir les modifications du serveur.

Ainsi, l'un des principaux avantages de le faire, c'est que ses un départ rapide. Et lorsque les données devient trop grande, ajouter tous les option de la révision à la baisse qu'une seule fois au début. Alors que chaque mise à jour / obtient peut être ajouté, après la période initiale de données à saisir.

C'est un bon cycle de travail : Rapide prototype -> Efficace client-serveur datagrid

Answer 3

Je suis à l'aide de addJSONData pour l'amélioration de la performance sur la page. Ici est mon cas d'utilisation

J'ai 4 jqGrids sur la page. La récupération des données de la méthode est la même pour tous les 4 grilles, mais les colonnes et les lignes sont différentes dans chaque grille. Donc au lieu de faire 4 appels au serveur pour remplir les données dans chaque grille, je fais un appel qui renvoie supplémentaires de données JSON pour les 3 autres grilles. Et sur "loadComplete" l'événement de la première grille, j'ai séparé les données pour chacun des 3 autres grilles et de les charger individuellement. Voici une version tronquée en bas de la loadComplete cas de la première grille

 loadComplete:function (data) {

        //clear and reload area summary table
        var areaSummary = data.areaSummary;
        jQuery("#areaSummaryTable").jqGrid('clearGridData');
        jQuery("#areaSummaryTable")[0].addJSONData(areaSummary);

        //clear and reload area total table
        var areaTotal = data.areaTotal;
        jQuery("#areaTotalTable").jqGrid('clearGridData');
        jQuery("#areaTotalTable")[0].addJSONData(areaTotal);

        //clear and reload area detail table
        jQuery("#detailedAreaTable").jqGrid('clearGridData');
        var areaDetail = data.areaDetail;
        jQuery("#detailedAreaTable")[0].addJSONData(areaDetail);
    }

Cela a très bien fonctionné pour les 2 dernières semaines, jusqu'à aujourd'hui, j'ai remarqué que sur le chargement de la page, chacun des 3 grilles est de faire des appels au serveur aléatoire URL. La raison de ce qui s'est avéré être parce que le type de données pour ces grilles ont été définies comme des "json". Si je change le type de données à "locale", pas de serveur, les appels sont effectués à partir de cette grille, mais addJSONData méthode dans le code ci-dessus s'arrête de fonctionner. J'ai essayé d'utiliser "setGridParam" pour changer le type de données à 'json' avant d'utiliser addJSONData comme ci-dessous mais ce n'est pas non plus de travail.

        jQuery("#areaSummaryTable").jqGrid('clearGridData');
        jQuery("#areaSummaryTable").jqGrid('setGridParam', {datatype:'json'});
        jQuery("#areaSummaryTable")[0].addJSONData(areaSummary);

J'espère qu'il existe un moyen facile de convertir les données dans un tableau et utiliser addRowData :) Laissez-moi savoir si il ya une meilleure façon de traiter un cas d'utilisation

Answer 4

Voici pourquoi j'utilise addJSONData()...

Dans mon cas, j'ai une page qui contient les données de la grille, et une autre page qui est utilisé pour construire des critères de recherche.

La page de recherche, qui ne sait rien sur la grille de la page, contient sept champs. L'utilisateur peut remplir au moins l'une ou l'ensemble des sept champs.

Lors de la soumission, de la page de recherche des formats de données comme des paires clé/valeur dans un objet JSON qui est envoyé au serveur.

Sur le serveur, les données JSON est analysée dans une clause where.

Les données SQL, les résultats sont communiqués au client comme un objet JSON dans la réponse HTTP qui s'appuie également la grille de la page de code envoyé par le serveur.

Autant que je sache, la seule façon d'obtenir les données JSON à partir de la réponse HTTP dans la grille à l'aide de addJSONData().

Chris

Answer 5

Lorsque vous avez besoin d'avoir un contrôle complet sur comment et quand l'ajax est de l'envoyer, vous préférez utiliser addJSONData.

par exemple, Un formulaire de recherche contient deux <select> zone de ajaxly renseigné, la valeur de la première select aurait une incidence sur le second. Il est possible que l'utilisateur a une valeur par défaut pour l' select boîtes. Et vous voulez la recherche de la grille qu'une fois les deux valeurs sont définies.

Il est alors préférable d'utiliser des choses comme $.Deferred à la commande la commande de l'ajax appels et renseigner. Bien sûr, vous pouvez définir jqgrid données local puis json, puis reloadGrid pour contrôler le déclenchement. Mais c'est juste pas que trival.