Wie kann ich das implementieren einer benutzerdefinierten jqGrid löschen-Taste?

Habe ich einen delete-button für jede Zeile in meiner jqGrid. Jetzt muss ich zum hinzufügen von Funktionalität zu diesen Tasten. Jede Schaltfläche hat, löschen Sie die Zeile, die es in und das entfernen von Daten von dem server. Wie kann ich dies tun? Hier ist mein code bisher:

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"
    });
});
  • ist Slet den Wert Ihrer Schaltfläche löschen
InformationsquelleAutor Timsen | 2011-08-19
  1. 2

    Können Sie delGridRow Methode Vordergrund Beispiel. Um dies zu tun, können Sie einfach ersetzen Sie in Ihrem code jQuery('#list').deleteRow( zu jQuery('#list').jqGrid('delGridRow',

    Können Sie erwägen, die Verwendung formatter:'actions': siehe hier, hier und hier. Eine weitere Möglichkeit zum implementieren von benutzerdefinierten Schaltflächen finden Sie hier.

    AKTUALISIERT: Für zusätzliche Informationen senden, während der Delete-operation, die Sie verwenden können delData parameter der delGridRow Methode:

    be = "... onclick=\"jQuery('#list').deleteRow('" + cl +
  ",{delData:{Navn:'"+ jQuery("#list").jqGrid('getCell',cl,'Navn')+ "'});\"  />";

    Den Ausdruck jQuery("#list").jqGrid('getCell',cl,'Navn') wird der Wert aus der 'Navn' - Spalte und die {delData:{Navn:'NavnValue'} hinzufügen Navn=NavnValue parameter, um die Daten an den server senden.

    AKTUALISIERT 2: Ihr Hauptproblem war, dass Sie im demo-Projekt eine andere version der code, wie gepostet, die in Ihrer Frage. Ihre demo hat

    ... onclick=\"jQuery('#list').jqGrid('delGridRow','" + rows + "',

    statt

    ... onclick=\"jQuery('#list').jqGrid('delGridRow','" + cl + "',

    das ist der erste wichtige Fehler. Die rows Variablen, die Sie festlegen, wie var rows = jQuery("#list").jqGrid('getGridParam','selrow'); innerhalb von gridComplete. Zu der Zeit keine Zeile ausgewählt ist, wird rows = null und Sie onclick=\"jQuery('#list').jqGrid('delGridRow','null' für alle buttons.

    Dem nächsten wichtigen problem: sollten Sie

    public ActionResult deleteRow(String ProductId)

    zu

    public ActionResult deleteRow(String id)

    oder verwenden Sie prmNames: {id: 'ProductId'} als zusätzliche jqGrid-parameter.

    Andere häufige Probleme:

    • Sollten Sie ändern _Layout.cshtml - Datei. Sie sollten zu entfernen <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script> denn Sie gehören anderen version von jQuery (jquery-1.5.2.min.js) in der Index.cshtml
    • Sie sollte in der Nähe <table id="list"> (hinzufügen ) in die Index.cshtml.
    • Wenn Sie wollen, um pager in der Startaufstellung (Sie verwendet jQuery("#list").jqGrid('navGrid', "#page", ...) sollten Sie 1.) <div id="page"></div> im Index.cshtml und parameter hinzufügen pager: '#page' zu den jqGrid.
    • Müssen Sie reinigen Sie die HTML-markup, das Sie verwenden. Zum Beispiel sollten Sie entfernen </div> ab Ende Index.cshtml. Eine weitere </div> am Ende @RenderSection("Main", required: false)</div> (in der _Layout.cshtml - Datei) sollte auch entfernt werden.

    • Sehen den pager in der richtigen Breite, die Sie umfassen sollten, die _Layout.cshtml - Datei das folgende Update

      <style type="text/css">input.ui-pg-input { width: auto; }</style>

    • Sollten Sie mindestens jQuery UI CSS und ui.jqgrid.css zum Beispiel in der _Layout.cshtml Datei:

    Ich würde empfehlen, Sie zu ersetzen jquery-1.5.2.min.js zu jquery-1.6.2.min.js. Die Letzte version von vsdoc - Dateien können Sie immer laden von hier. In der gleichen Weise die Letzte version (derzeit 1.8.16) von jQuery UI ist auch zu empfehlen.

    Ich würde empfehlen, dass Sie zum download der VS2010-demo-Projekt die ich erstellt für die Antwort und verwenden Sie es als Vorlage für Ihr Projekt. Sie können Sie leicht ändern Sie den code, Razor.

    • Okay jetzt ive bekam es zu reagieren und löschen von Zeilen, aber jetzt habe ich, um es zu löschen, ein raw in meinem server, also muss ich senden "Navn" mit meinem löschen oeration
    • Ich angehangen meine Antwort mit weiteren Informationen.
    • Problem das ich habe, ist, dass ich frömmle, sendt die Daten weiter an meinem controller.
    • Sollten Sie beschreiben Ihr problem genauer. Tun Sie wirklich nicht, senden Sie die Daten oder die Steuerung nicht die Daten Lesen? Bis jetzt ist Sie nicht enthalten keine server-seitigen code in deiner Frage. Sie können prüfen, die den HTTP-Verkehr mit Bezug auf Spielmann oder Firebug.
    • okay, sorry, Das was ich will, ist zu senden SellerId Wert auf den controller, wenn ich drücken Sie "löschen" in meinem jqgrid, so kann ich es löschen, mein controller. Genauso wie Sie tun, wenn u machen Bearbeiten
    • Ich sehe keine SellerId im jqGrid definition. Wenn Sie füllen Sie jqGrid mit SellerId als id (rowid), die id Wert wird automatisch an den server senden. Es wird getan für die Delete-operation in der gleichen Weise, wie für das Bearbeiten oder Hinzufügen von Operationen. Sie können benennen Sie die id parameter SellerId mit Bezug auf prmNames: {id:"SellerId"} parameter von jqGrid. Einfach überprüfen, was derzeit an den server senden. Wenn Sie wollen, um die Daten in einem anderen format sollten Sie beschreiben, in welches format Sie die Daten benötigen.
    • Lesen Sie meinen neuen code oben, wo ich einige Unterschiede
    • Lesen Sie meinen neuen code oben, wo ich einige Unterschiede haben, jetzt gerade bin ich Klick auf löschen-button in einer Zeile, im versenden Verweis auf delGridRow in meiner controller-Klasse. Controller-Klasse String SellerKey als eine eingehende Parameter aber, wenn im Betrieb der grid-meine sellerkey parameter in der controller null ist, wo delGridRow genannt wird
    • OK, jetzt habe ich gefunden der code. Bitte append immer den code auf deine Frage, statt zu schreiben, die Antwort auf Ihre eigene Frage. Um Ihr problem zu lösen sollte man einfach entweder umbenennen SellerKey parameter aus dem controller-action zu id oder hinzufügen prmNames: {id:"SellerKey"} parameter der jqGrid. Durch die Art und Weise, die Sie nicht brauchen, um den Namen der controller-action als delGridRow. Die delGridRow ist jqGrid-Methode, die die Arbeit auf Ihrem client-code. Die url parameter der delGridRow Methode sollte nur gesetzt, um die controller-action.
    • Vielen Dank für die schnellen Antworten, ich habe versucht zu verwenden errichtet in der id, aber seine immer noch nicht funktioniert, beim debugging, kann ich sehen, dass im controller sellerkey Wert ist noch null
    • Haben Sie versucht, Spielmann oder Firebug? Es ist wichtig zu wissen, wo haben Sie das problem: auf der server-Seite oder auf der client-Seite. Außerdem ist es immer hilfreich, öffnen Sie den Quelltext der generierten Seite im web-browser. Wenn die löschen-Aktion auf dem controller aufgerufen werden, richtig können Sie haben einige Probleme im MVC routing (Blick auf MapRoute die Sie verwenden in der RegisterRoutes).
    • Es ist ein locla SQL-server habe ich laufen, wenn ich einen Blick in den Quellcode, ich kann das rows-Eigenschaft null ist, so jqgrid ist nicht der Wert aus einer ausgewählten Zeile
    • Nur das tracing von HTTP-Verkehr (mit Fiddler ' zum Beispiel) kann gibt Ihnen genügend Informationen, ob Sie das problem auf dem server oder auf dem client-Teil. Wenn Sie irgendwo hochladen Testprojekts konnte ich Debuggen, auf meinem computer und sagen dir, wo du einen Fehler gemacht.
    • hier ist eine einfache demo, das layout ist nicht schön, aber alle Funktionen sind da, krank hoffe ull finde irgendeine Art von Lösung, oleg, im beign mit Ihr kämpfen alle mein Wochenende. 2shared.com/file/5cQvo8Fd/MvcApplication3.html
    • ach fast vergessen, kann u verwenden northwind-Datenbank
    • Ich angehangen meine Antwort.
    • Vielen Dank, es war sehr helpfull
    • Sie sind herzlich willkommen!
    • Noch eine Frage, nun möchte ich Schaltflächen zu hyperlinks mit derselben Funktion, da die buttons sieht sehr hässlich im Netz, gibt es eine Möglichkeit, es zu tun?

    InformationsquelleAutor Oleg
  2. 0

    versuchen 

    $("#classOfYourButton").click(function(e){

e.stopPropagation();
$(this).closest("tr").remove();
});
    • was wird Sie tun?
    • fügen Sie eine Klasse, um Ihre Schaltfläche löschen und ersetzen Sie diesen Namen mit classOfYourButton auf klicken, wird Sie den tr
    InformationsquelleAutor Rafay
Schreibe einen Kommentar