Comment envoyer les données au serveur après l’édition en ligne?

Je pense que votre code a beaucoup de petits problèmes. J’ai préparé la démo https://jsfiddle.net/OlegKi/rmo2370r/19/ , qui devrait résoudre le plus de problèmes et montrer l’utilisation de select2 et certaines fonctionnalités de jqGrid gratuit.

Le premier petit problème est l’utilisation de rowid correct. Vous utilisez la colonne actuellement masquée

 {name: "Id", jsonmap: "Id", key: true, hidden: true} 

C’est un malentendu typique des utilisateurs qui utilisent jqGrid. Rowid sera enregistré en tant qu’atsortingbut id de lignes (

éléments). Voir la photo Il n’est pas nécessaire de placer les informations de cas en tant qu’élément

caché à l’intérieur de la grid. Au lieu de cela, vous pouvez simplement utiliser les options jqGrid suivantes

 prmNames: { id: "Id" }, jsonReader: { id: "Id" }, 

au lieu. L’option jsonReader.id indique à jqGrid où obtenir rowid lors du remplissage de la grid et prmNames.id fournit le nom de id lors de l’édition de la grid.

Pour remplir jqGrid dans JSFiddle, vous pouvez utiliser le service Echo:

 url: '/echo/json/', datatype: 'json', mtype: 'POST', // required for '/echo/json/' postData: { json: JSON.ssortingngify(mydata) }, 

La demande à l’URL /echo/json/ will mydata tant que réponse. On peut utiliser l’onglet Réseau des Outils de développement de Chrome / IE / Firefox pour examiner le trafic HTTP en détail.

De la même manière, on peut utiliser

 editurl: '/echo/json/', formDeleting: { url: '/echo/json/', ... } 

pour l’édition en ligne et la suppression de formulaires.

Les prochains changements. J’ai ajouté la propriété resetWidthOrg: true dans autoResizing :

 autoResizing: { compact: true, resetWidthOrg: true } 

qui a changé les résultats de travail autowidth: true en combinaison avec autoresizeOnLoad: true . Vous pouvez voir que la largeur de toutes les colonnes est beaucoup mieux basée sur le contenu des colonnes qu’avant. Voir les numéros pour plus de détails.

Je n’ai pas compris l’objective de customActionsFormatter . Je l’ai remplacé pour les actions de formatage standard

 { name: "act", template: "actions" } 

JqGrid gratuit permet très facilement de personnaliser les boutons d’action si nécessaire. Voir la réponse et l’article du wiki pour plus de détails.

Votre ancien code utilisé

 cmTemplate: { autoResizable: true, editable: true } 

et définissez editable: false dans la plupart des colonnes. Au lieu de cela, il suffit de supprimer editable: true de cmTemplate , d’append editable: true dans une seule colonne, que vous devez modifier, et d’inclure dans cmTemplate autre paramètre généralement utilisé dans colModel :

 cmTemplate: { width: 300, autoResizable: true } 

Beaucoup d’autres codes pourraient également être simplifiés. Voir le code modifié de onSelectRow par exemple.

Pour personnaliser la boîte de dialog de suppression, vous pouvez utiliser les parameters suivants:

 formDeleting: { url: '/echo/json/', // '/ajax/plans_to_forms/delete/' in final solution width: 320, caption: 'Delete Plan to Form Link', msg: 'Are you sure you want to delete this link?', beforeShowForm: function ($form) { var rowids = $form.find("#DelData>td").data("rowids"); console.log(rowids); if (rowids.length > 1) { $form.find("td.delmsg") .html('Are you sure you want to delete all the selected form links?'); } } } 

Supprimer envoie les données Id=20622,20626 et oper=del au serveur ( formDeleting.url ). SerializeDelData peut être utilisé pour convertir les données au format JSON si nécessaire.

Pour envoyer plus de données des colonnes au serveur lors de l’édition, vous pouvez append editable: "hidden" dans certaines colonnes. J’ai ajouté la propriété dans la colonne FormId de la démo et les données FormId au serveur pendant l’édition ressemblaient à

 {"FormId":"3393","DrugGroupName":"Some other value","oper":"edit","Id":"20620"} 

Pour renseigner les données de en respectant les demandes Ajax supplémentaires adressées au serveur, vous devez utiliser editoptions.dataUrl . J’ai ajouté dans la démo editoptions.postData pour simuler uniquement la demande réelle adressée au serveur:

 editoptions: { dataUrl: "/echo/json/", postData: { json: JSON.ssortingngify([ "Non-Specialty Medications", "General Pharmacy Authorization", "Some other value" ]) }, buildSelect: function (data) { var select = "", i; for (i = 0; i < data.length; i++) { select += "" + $.jgrid.htmlEncode(data[i]) + "" } return select + ""; }, selectFilled: function(options) { var $self = $(this); setTimeout(function() { $(options.elem).select2({ width: "100%" }).on('select2:select', function (e) { // save the data on selection $self.jqGrid("saveRow", options.rowid); }); }, 0); } }, stype: "select", searchoptions: { sopt: ["eq", "ne"], generateValue: true, noFilterText: "Any", selectFilled: function(options) { $(options.elem).select2({ width: "100%" }); } } } 

La requête ci-dessus à dataUrl renvoie la chaîne JSON [ "Non-Specialty Medications", "General Pharmacy Authorization", "Some other value" ] et buildSelect convertit les données en fragment HTML avec contenant toutes les . Le résultat résultant sera converti en select2 à l’intérieur du rappel selectFilled . Enfin l’utilisation du code

 ajaxSelectOptions: { type: "POST", dataType: "json" } 

possibilité de changer les parameters de la requête Ajax en dataUrl . La démo https://jsfiddle.net/OlegKi/rmo2370r/19/ contient d’autres modifications mineures, telles que la suppression d’un div de pager vide inutile et l’utilisation de pager: true de la même manière que vous utilisez déjà toppager: true . C’est une fonctionnalité supplémentaire que j’ai implémentée dans jqGrid free fork pour simplifier l’utilisation de jqGrid.