Benutzerdefinierte Löschtaste in jqGrid

Question

Ich möchte meine eigene Löschfunktionalität in jqGrid implementieren. Ich verwende derzeit die integrierte Benutzeroberfläche (Zeile auswählen, Mülleimer-Schaltfläche in der Fußzeile drücken, bestätigen), aber ich bevorzuge eine Löschschaltfläche in jeder Zeile und implementiere meine eigene Benutzerschnittstelle zur Bestätigung.

Ich sehe nichts in der API, die mir ermöglicht, eine Löschung auf den Server auszulösen - nur delRowData, die es auf dem Client löscht. Kann das gemacht werden?

(Ich verwende die ASP.NET component, FWIW).

Answer 1

@Erik hat mich auf den richtigen Weg gebracht. Seine Lösung funktioniert, behält aber die bestehende pseudomodale Popup-Bestätigungs-Benutzeroberfläche bei, die ich vermeiden wollte.

Es nutzt auch nicht die Dienste, die die JqGrid ASP.NET component bietet. Die Komponente kümmert sich tatsächlich um alle CRUD-Operationen, solange sie an eine ordnungsgemäß konfigurierte Datenquelle (ObjectDataSource, SqlDataSource usw.) angeschlossen ist.

Dieses fehlende Stück für mich war die Mechanik hinter den CRUD-Operationen der Komponente. Durch Stochern mit Fiddler ich in der Lage war zu sehen, dass er die entsprechenden Daten auf die gleiche Seite, mit der ClientID des JqGrid Objekts im Abfragezeichenfolgeflag Beiträge:

MyPage.aspx?jqGridID=ctl00_ctl00_Content_Content_MyJqGrid

Zum Löschen des Inhalt des POST ist als @ Erik beschreibt:

oper=del&id=18

so habe ich in der Lage gewesen, den Betrieb auf eigene Faust zu duplizieren, so dass ich die vollständige Kontrolle über den gesamten Prozess behalten:

$(".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).trigger("reloadGrid"); 
     }); 
    } else { 
     $(grid).resetSelection(); 
    } // if 
}); // click 

getRowID = function(el) { 
    return $(el).parents("tr").attr("id"); 
}; 

Answer 2

Es gibt keinen Teil der grundlegenden jqGrid-Komponente, die die serverseitige Löschung behandelt - selbst wenn Sie die integrierte Löschfunktion verwenden, die Serverseite nicht für Sie entfernt, müssen Sie selbst damit umgehen. Aber hier ist, wie man es so einrichten, das Skript aufgerufen wird, wenn jemand klickt auf Ihre benutzerdefinierte Schaltfläche löschen:

// 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} 
    ); 
}); 

Die folgenden Informationen sind Vergangenheit per Post an Ihre löschen URL

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

Wo Es ist offensichtlich die ID übergeben Sie in diesem Fall den Wert toDelete.

Ich tat dies tatsächlich für mein eigenes Projekt, als Antwort auf Ihre Frage - obwohl ich eine vage Idee hatte, wie ich es machen könnte, bevor ich die Frage sah. Also ... danke, dass ich dazu gekommen bin!

Answer 3

Eine andere Lösung Programm ist Klicken Sie auf das Löschen-Symbol (falls vorhanden). Die ID für das Löschsymbol (eigentlich ein Div) lautet "del_ [GridId]". Dies mag keine vollkommen feste Lösung sein, da sie diese ID-Benennung ändern können. Aber du bekommst genau das gleiche Verhalten (und auch das schönere Modal).

Beispiel:

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