Comment puis-je mettre en œuvre une coutume jqGrid bouton supprimer?
J'ai ajouté un bouton supprimer pour chaque ligne dans mon jqGrid. Maintenant, j'ai besoin d'ajouter des fonctions de ces boutons. Chaque bouton a pour supprimer la ligne qui il est et de suppression des données à partir du serveur. Comment puis-je faire cela? Voici mon code pour l'instant:
var lastsel;
jQuery(document).ready(function () {
jQuery("#list").jqGrid({
url: '@Url.Action("Category1List")',
datatype: 'json',
mtype: 'GET',
colNames: ['Navn', 'Slet'],
colModel: [
{ name: 'Navn', index: 'Navn', width: 50,edittype: 'text', align: 'center', editable: true , key: true },
{ name: 'act', index: 'act', width: 75, sortable: false}],
gridComplete: function () {
var ids = jQuery("#list").jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
var cl = ids[i];
be = "<input style='height:22px;width:90px;' type='button' value='Slet' onclick=\"jQuery('#list').deleteRow('" + cl + "');\" />";
jQuery("#list").jqGrid('setRowData', ids[i], { act: be });
}
},
onSelectRow: function (id) {
if (id && id !== lastsel) {
jQuery('#list').jqGrid('restoreRow', lastsel);
jQuery('#list').jqGrid('editRow', id, true);
lastsel = id;
}
},
editurl: '@Url.Action("GridSave")',
rowNum: 50000,
rowList: [5, 10, 20, 50],
pager: '#page',
sortname: 'Id',
sortorder: "desc",
viewrecords: true,
height: "500px"
});
});
- est
Slet
la valeur de votre bouton supprimer
Vous devez vous connecter pour publier un commentaire.
Vous pouvez utiliser delGridRow méthode par exemple. Pour ce faire, vous pouvez simplement remplacer dans votre code
jQuery('#list').deleteRow(
àjQuery('#list').jqGrid('delGridRow',
Vous pouvez envisager d'utiliser
formatter:'actions'
: voir ici, ici et ici. Un moyen de plus pour mettre en œuvre des boutons personnalisés, vous trouverez ici.Mis à JOUR: Pour envoyer des informations supplémentaires au cours de l'opération de Suppression, vous pouvez utiliser delData paramètre de delGridRow méthode:
L'expression
jQuery("#list").jqGrid('getCell',cl,'Navn')
permettra d'obtenir la valeur de la 'Navn colonne et{delData:{Navn:'NavnValue'}
va ajouterNavn=NavnValue
paramètre pour l'envoi de données au serveur.Mise à JOUR 2: Votre principal problème est que vous avez utilisé dans le projet de démonstration une autre version du code que vous avez posté votre question. Votre démo a
au lieu de
qui est la première erreur. Le
rows
variable vous définissez commevar rows = jQuery("#list").jqGrid('getGridParam','selrow');
à l'intérieur degridComplete
. À l'époque, aucune ligne n'est sélectionnée,rows = null
et vous placeonclick=\"jQuery('#list').jqGrid('delGridRow','null'
pour tous vos boutons.Le prochain problème important: vous devriez renommer
à
ou de l'utilisation
prmNames: {id: 'ProductId'}
supplémentaires jqGrid paramètre.D'autres problèmes communs:
_Layout.cshtml
fichier. Vous devez supprimer<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
parce que vous incluez un autre version de jQuery (jquery-1.5.2.min.js) dans leIndex.cshtml
<table id="list">
(ajouter ) dans laIndex.cshtml
.jQuery("#list").jqGrid('navGrid', "#page", ...
) vous devez: 1) ajouter<div id="page"></div>
dans leIndex.cshtml
et ajouter un paramètrepager: '#page'
à la jqGrid.</div>
à partir de la fin deIndex.cshtml
. Un plus</div>
à la fin de@RenderSection("Main", required: false)</div>
(dans le_Layout.cshtml
fichier) doit également être supprimé.Pour voir le pager dans la largeur correcte, vous devez inclure dans le
_Layout.cshtml
fichier le correctif suivant<style type="text/css">input.ui-pg-input { width: auto; }</style>
Vous devez inclure au moins jQuery UI CSS et
ui.jqgrid.css
par exemple dans le_Layout.cshtml
fichier:Je vous recommande de remplacer
jquery-1.5.2.min.js
àjquery-1.6.2.min.js
. La dernière version devsdoc
fichiers vous pouvez toujours charger de ici. De la même manière que la dernière version (actuellement 1.8.16) de jQuery UI est également recommandé.Je vous recommande de télécharger le VS2010 projet de démonstration que j'ai créé pour la réponse et l'utiliser comme modèle pour votre projet. Vous pouvez facilement modifier le code à utiliser de Rasoir.
SellerId
dans le jqGrid définition. Si vous remplissez jqGrid avecSellerId
que l'id (rowid), leid
valeur sera automatiquement envoyer au serveur. Ce sera fait pour Supprimer l'opération de la même manière que pour Modifier ou Ajouter des opérations. Vous pouvez renommer leid
paramètreSellerId
à l'égard deprmNames: {id:"SellerId"}
paramètre de jqGrid. Juste vérifier ce qui va être actuellement envoyer au serveur. Si vous voulez avoir les données dans un autre format vous devriez décrire dans lequel un format que vous avez besoin de données.SellerKey
paramètre à partir de votre contrôleur de l'action àid
ou pour ajouterprmNames: {id:"SellerKey"}
paramètre à la jqGrid. Par la façon dont vous n'avez pas besoin de nom de l'action du contrôleur commedelGridRow
. LedelGridRow
est jqGrid, une méthode de travail à votre code client. Leurl
paramètre dedelGridRow
méthode doit être mise à l'action du contrôleur.MapRoute
que vous utilisez dans leRegisterRoutes
).essayer
classOfYourButton
sur cliquez sur supprimer l'tr