jQuery - jqGrid - Senden Sie Schaltflächen in jeder Zeile

Verwenden von jqGrid 4.5.2 und jQuery 1.9.1. Ich habe ein jqGrid auf einer Webseite, auf der Datenzeilen angezeigt werden, die von einer Abfrage zurückgegeben wurden. Jede Zeile im Raster hat 2submit Schaltflächen, die standardmäßig deaktiviert sind, jedoch innerhalb von aktiviert werdenonSelectRow Ereignis des jqGrid.

Ich füge die Schaltflächen im folgenden Code hinzu:

var ids = $("#myGrid").jqGrid("getDataIDs");
for (var i=0;i < ids.length;i++) {
    var cl = ids[i];
    sm = "<input id='resendMsg' style='height:25px;width:65px;' type='submit' value='Re-Send' disabled='true'  />";
    ca = "<input id='cancelMsg' style='height:25px;width:55px;' type='submit' value='Cancel' disabled='true' />";
    $("#myGrid").jqGrid("setRowData",ids[i], {msgAct:sm+ca});
    }

Bitte beachten Sie, dass diesubmit Knöpfe kommen hochdeaktiviert standardmäßig.

Wenn eine Zeile im Raster ausgewählt ist, möchte ich die beiden Schaltflächennur für diese Reihe seinenabled. Auch in deronSelectRow Ereignis sind, wo ich Variablen für die spätere Verwendung festlegen.

var gridRow = $(this).jqGrid("getRowData",id);
var srow = $(this).jqGrid("getGridParam","selrow");

Anderes Verhalten, an dem ich interessiert binonSelectRow -

Sie möchten nicht in der Lage sein, die Zeile anzuklicken - eine der beiden Senden-Schaltflächen muss angeklickt werden, um zu einer anderen Zeile im Raster zu gelangen. Eine Übergabe führt eine Aktion aus und setzt dann das Raster zurück (nichts ist ausgewählt und alle Schaltflächen in allen Zeilen sind deaktiviert).
Die andere Schaltfläche zum Senden (aCancel button) führt die Aktion im vorherigen Schritt nicht aus, setzt jedoch das Raster zurück (nichts ist ausgewählt und alle Schaltflächen in allen Zeilen sind deaktiviert).

Ich habe verschiedene Dinge versucht, um die Schaltflächen in der ausgewählten Zeile zu aktivieren, aber es aktiviert entweder nur die erste Zeile, alle Zeilen oder keine Zeilen. Ich habe mir den Wert in angeschautsrow oben & kann bestätigen, dass es die richtige ID für die Zeile hat.

Wie können Sie die Übermittlungsschaltflächen in der ausgewählten Zeile als Ziel festlegen, um sie zu aktivieren (und alle anderen Schaltflächen im Raster deaktiviert zu lassen)?

Vielen Dank!

BEARBEITEN:

Dank @Oleg & seinen Vorschlägen & Follow-up konnte ich meine Frage lösen. @Olegs Antworten haben mich auf den richtigen Weg gebracht.

In demcolModel Ich habe diemsgAct um die Schaltflächen für jede Zeile abzurufen und mit dieser Zeile zu verknüpfen.

{name: "msgAct",
    width: col4width,
    align: "center",
    formatter: function() {
    return "<input name='resendMsg' style='height:25px;width:65px;' type='submit' value='Re-Send' disabled='disabled' />" +
       "<input name='cancelMsg' style='height:25px;width:55px;' type='submit' value='Cancel' disabled='disabled' />" 
    }}

In demOnSelectRowIch habe auch seinen Vorschlag genutzt, um abzuschaltenalles Die Schaltflächen im jqGrid und dann die Schaltflächen in der von mir ausgewählten Zeile einschalten.

// disable all resendMsg & cancelMsg buttons in the grid
$(this).find("input[name=resendMsg]").attr("disabled","disabled");
$(this).find("input[name=cancelMsg]").attr("disabled", "disabled");
// now enable the buttons for the current row only
$(tr).find("input[name=resendMsg]").removeAttr("disabled");
$(tr).find("input[name=cancelMsg]").removeAttr("disabled");

Ich hatte auch anderen Code, um andere Dropdowns auf der Seite zu deaktivieren, sodass nur eines von drei Dingen passieren konnte:

Der Benutzer kann auf die Schaltfläche Erneut senden klickenDer Benutzer kann auf die Schaltfläche Abbrechen klickenDer Benutzer kann auf eine andere Zeile im jqGrid klicken

Da würde # 3 oben einen anderen auslösenOnSelectRow Eventuell wollte ich das der User machen mussetwas mit der ausgewählten Zeile.

Unter Verwendung des Vorschlags von @ Oleg, alle und dann nur die Schaltflächen der ausgewählten Zeile zu deaktivieren, habe ich auch den Klickereigniscode für jede Zeile in das Feld eingefügtonSelectRow Veranstaltung.

$(tr).find("input[name=cancelMsg]").click(function() {
    // disable all resendMsg & cancelMsg buttons in the grid
    $(this).find("input[name=resendMsg]").attr("disabled","disabled");
    $(this).find("input[name=cancelMsg]").attr("disabled", "disabled");
    ....do other stuff .....
    ReloadGrid();
    });
$(tr).find("input[name=resendMsg]").click(function() {
    ReSend(gridRow.Col1, gridRow.Col2);
    // disable all resendMsg & cancelMsg buttons in the grid
    $(this).find("input[name=resendMsg]").attr("disabled","disabled");
    $(this).find("input[name=cancelMsg]").attr("disabled", "disabled");
    .... do other stuff ....
    });
},

Das Gitter macht jetzt, was ich will. Zum Beispiel -

Wenn das Raster geladen wird, haben alle Zeilen im Raster eine msgAct-Spalte und diese Spalte enthält die Schaltflächen Erneut senden und Abbrechen, die beide vorhanden, aber ausgegraut sind.Wenn Zeile 3 ausgewählt ist, sind die Schaltflächen für das erneute Senden und Abbrechen von msgAct in Zeile 3 jetzt aktiviert und können angeklickt werden. Bei allen anderen Zeilen im Raster sind die Schaltflächen in diesen Zeilen immer noch ausgegraut.Wenn der Benutzer auf "Erneut senden" oder "Abbrechen" klickt, wird die entsprechende Aktion für diese Zeile im Raster ausgeführt. Erneut senden fügt dem Raster eine weitere Zeile hinzu, während Abbrechen die Auswahl zurücksetzt und das Raster so aussieht, wie es beim Laden war.Dem Benutzer stehen nur die Optionen Erneut senden, Abbrechen oder Auswählen einer anderen Zeile zur Verfügung. Durch Auswahl einer anderen Zeile werden die Schaltflächen in dieser Zeile aktiviert (durch Deaktivieren der Schaltflächen in der vorherigen Auswahl), und durch Klicken auf eine der Schaltflächen wird die entsprechende Aktion für diese Zeile gestartet.

Die Frage könnte nun lauten: Gibt es einen besseren Weg, dies zu tun?

Vielen Dank @Oleg für Ihre wertvolle Hilfe!

Antworten auf die Frage(1)

Ihre Antwort auf die Frage