Bouton de suppression personnalisé dans jqGrid

J’aimerais implémenter ma propre fonctionnalité de suppression dans jqGrid. J’utilise actuellement l’interface utilisateur intégrée (sélectionner une ligne, appuyer sur le bouton de la corbeille en bas de page, confirmer), mais je préférerais disposer d’un bouton de suppression dans chaque ligne et implémenter ma propre interface utilisateur pour confirmation.

Je ne vois rien dans l’ API qui me permette de déclencher une suppression sur le serveur, mais simplement delRowData , qui la supprime sur le client. Cela peut-il être fait?

(J’utilise le composant ASP.NET , FWIW).

Aucune composante du composant jqGrid de base ne gère la suppression côté serveur – même si vous utilisez la suppression intégrée, vous ne devez pas la supprimer côté serveur, vous devez la gérer vous-même. Mais voici comment le configurer pour que votre script soit appelé lorsque quelqu’un clique sur votre bouton de suppression personnalisé:

 // your custom button is #bDelete $("#bDelete").click(function(){ // Get the currently selected row toDelete = $("#mygrid").jqGrid('getGridParam','selrow'); // You'll get a pop-up confirmation dialog, and if you say yes, // it will call "delete.php" on your server. $("#mygrid").jqGrid( 'delGridRow', toDelete, { url: 'delete.php', reloadAfterSubmit:false} ); });

Les informations suivantes sont passées via POST à votre URL de suppression

 Array ( [oper] => del [id] => 88 )

Où id est évidemment l’id que vous avez passé dans la fonction dans ce cas, la valeur de toDelete .

En fait, je viens de faire cela pour mon propre projet, en réponse à votre question – même si j’avais une vague idée de la façon de le faire avant de voir la question. Alors … merci de me l’avoir fait!

@Erik m’a mis sur le droit chemin sur celui-ci. Sa solution fonctionne, mais conserve l’interface utilisateur de confirmation contextuelle pseudo-modale existante, ce que je voulais éviter.

Il ne tire pas non plus parti des services fournis par le composant ASP.NET de JqGrid . Le composant prend en charge toutes les opérations CRUD tant qu’il est connecté à une source de données correctement configurée (ObjectDataSource, SqlDataSource, etc.).

Cette pièce manquante pour moi était la mécanique derrière les opérations CRUD de la composante. En fouillant avec Fiddler, j’ai pu constater qu’il envoyait les données pertinentes à la même page, avec l’identifiant client de l’object JqGrid dans la chaîne de requête:

  MyPage.aspx? JqGridID = ctl00_ctl00_Content_Content_MyJqGrid

Pour la suppression, le contenu du POST correspond à ce que @Erik décrit:

  oper = del & id = 18

J’ai donc pu dupliquer moi-même l’opération afin de garder le contrôle total du processus:

 $(".DeleteButton", grid).click(function(e) { var rowID = getRowID(this); $(grid).setSelection(rowID, false); if (confirm('Are you sure you want to delete this row?')) { var url = window.location + '?jqGridID=' + grid[0].id; var data = { oper: 'del', id: rowID }; $.post(url, data, function(data, textStatus, XMLHttpRequest) { $(grid).sortinggger("reloadGrid"); }); } else { $(grid).resetSelection(); } // if }); // click getRowID = function(el) { return $(el).parents("tr").attr("id"); };

Une autre solution consiste à cliquer par programme sur l’icône de suppression (si présente). L’identifiant de l’icône de suppression (en réalité un div) est “del_ [GridId]”. Cela peut ne pas être une solution totalement solide, car ils peuvent changer le nom de cet identifiant. Mais vous obtenez exactement le même comportement (et le modal de confirmation le plus agréable).

Exemple:

 $('#MyButton').click(function() { $('#del_' + gridId).click(); });