jQuery - jqGrid - unerwünschtes Verhalten in onSelectRow Veranstaltung

Ich hatte eine Vorherige Frage Bezug mit Knöpfen in jeder Reihe ein jqGrid, die aktiviert werden würde, wenn die Zeile ausgewählt wurde. Mit Hilfe von @Oleg ich war in der Lage, um es an die Arbeit, wie ich dachte, es sollte.

In weiteren Tests habe ich jedoch erkannt, unerwünschtes Verhalten in diesem onSelectRow Veranstaltung. Was ich fand, war, dass wenn ich ein raster mit 3 Zeilen, und ich klicken Sie auf die Zeile 2 (aktiviert, die Tasten), dann (ohne zu klicken auf die Zeile 2 buttons) klicken Sie auf Zeile 3 (die deaktiviert Zeile 2 Tasten & aktiviert Zeile 3 Tasten), und ändere meine Meinung wieder & klicken Sie auf Zeile 1 oder 2 (egal), und bei , DASS Punkt, dann klicken Sie auf die "Re-Send" (senden) - Taste, was passiert, ist, dass die ausgewählte Zeile wird dann erneut gesendet, 3 separate Zeiten.

Folgenden werden die timestamps von 4 Zeilen, die geschrieben wurden, von 1 "Erneut Senden" klicken Sie auf gestern.

2013-05-28 16:49:04.817
2013-05-28 16:49:04.653
2013-05-28 16:49:04.560
2013-05-28 16:49:04.467

Habe ich einige der Protokollierung in der Seite & bestätigt, dass es tut, rufen Sie die POST 4 separate mal, einmal für jeden Klick auf eine Zeile im raster.

Die folgenden Abschnitte enthalten die meisten der Konfiguration/Einstellungen, die ich derzeit habe, wo das jqGrid gebaut wird.

colNames: ["Destination", "Message Text", "Send Time","Message Action"],
colModel:[
    {name:"Destination",index:"Destination",width:col1width,align:"left", xmlmap:"Rowset>Row>Destination",sortable:false},
    {name:"MessageText",index:"MessageText",width:col2width,align:"left",xmlmap:"Rowset>Row>MessageText",sortable:false},
    {name:"SendTime",index:"SendTime",width:col3width,align:"center",formatter:"date",formatoptions: {"srcformat":"ISO8601Long", "newformat":"Y-m-d H:i:s"},xmlmap:"Rowset>Row>SendTime",sortable:false},
    {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' />" 
            }}
    ],
viewrecords: true,
caption: capMsg,
rownum: 0,
height: "100%",
width: gridwidth,
toolbar: [true, "top"],
pager: jQuery("#pager1"),
sortname: "SendTime",
hidegrid: false,                //hides the ability to collapse grid
defaults: {
    altrows: true, 
    recordtext: "View {0} - {1} of {2}",
    emptyrecords:  "No records to view",
    loadonce: true,
    pgtext: "Page  {0} of {1}"
    },

Folgenden ist die onSelectRow Veranstaltung.

onSelectRow:  function(id) {
    var tr = $(this).jqGrid("getInd",id,true);
    var gridRow = $(this).jqGrid("getRowData",id);
    var srow = $(this).jqGrid("getGridParam","selrow");
    //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");
    //disable dropdowns & sendMsg submit button
    //catch the Cancel button click
    $(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");
        //enable the dropdowns & clear the selection, reload grid
        ReloadGrid();
        });
    //catch the Re-Send button click
    $(tr).find("input[name=resendMsg]").click(function() {
        ReSendMessage(gridRow.Destination, gridRow.MessageText);
        //disable all resendMsg & cancelMsg buttons in the grid
        $(this).find("input[name=resendMsg]").attr("disabled","disabled");
        $(this).find("input[name=cancelMsg]").attr("disabled", "disabled");
        //enable the dropdowns, clear the selection and exit
        $("#myGrid").jqGrid("resetSelection");
        });
    },

und der Rest der jqGrid-code:

gridview: true,
xmlReader:  { 
    root: "Rowsets", 
            row: "Row",
    repeatitems: false,
    id: "SendTime"
    },
loadComplete: function() { 
    //increase row height
    $("td",".jqgrow").height(40);            //data grid rows
     //alternate background of every other row
    $("tr.jqgrow:odd").css({"background-color": "#DDDDDC", "background-image": "none"});
    $("th.ui-th-column").css("font-weight","bold");
    }
});

Es ist wie die onSelectRow Ereignis häufen sich die Anzahl der Klicks & dann Aufruf der click-Ereignis-Funktionen jedoch oft eine Zeile ausgewählt wurde aber ein button nicht geklickt.

Habe ich ausprobiert, aber, dass, wenn ich auf eine Zeile klicken, und klicken Sie dann auf die submit-buttons, die it-Prozesse wie zu erwarten (eine "Re-Send" legt die Zeile 1 mal, und ein "Cancel" löscht die Auswahl & macht nichts anderes).

Ich weiß nicht, ob es möglich ist, aber kann man verhindern, dass eine nachfolgende onSelectRow von feuern, wenn eine Zeile schon ausgewählt? Können Sie deaktivieren Sie die Vorherige Auswahl (oder zurücksetzen), um zu verhindern, dass die onSelectRow (und das click-Ereignis für die Schaltfläche) aus feuern mehrere Male?

Ich würde schätzen alle Gedanken, Kommentare oder Vorschläge, wie man um dieses Verhalten zu beheben.

BEARBEITEN

Einschließlich der code für beforeSelectRow wie bereits in einer Antwort weiter unten.

$("#myGrid").bind("jqGridBeforeSelectRow", function(e, id, eventOriginal) {
    var gsr = $("#myGrid").jqGrid("getGridParam","selrow");
    console.log(" ****  beforeSelectRow - (before if) lastSel = " + lastSel + "  id = " + id + "   gsr = " + gsr);
    if (id && id !== lastSel) {
        console.log("id && id !== lastSel");
        console.log("   id = " + id +  "    lastSel = " + lastSel);
        };
    if (id !== lastSel) {
        if (lastSel == -1) {   //first time thru
            lastSel = id;
            console.log(" ****  beforeSelectRow - first time thru - new val = " + lastSel + "  gsr = " + gsr);
            return true;
            }
          else {
            console.log(" ****  beforeSelectRow - lastSel - " + lastSel + "   <>  id = "  +id + "    gsr = " + gsr);
            return false;
            }
        }
    else {
        console.log(" ****  beforeSelectRow - otherwise they matched -  lastSel  = " + lastSel + "     id = " + id + "  gsr = " + gsr);
        return true;
        }
    });

Nach dem Umzug der .click Ereignis aus der onSelectRow in die loadComplete (für die Schaltfläche Abbrechen als test), ich habe versucht den obigen code innen & außen der code für das grid. Es führt die gleichen in beiden Fällen.

Das Problem ist, dass die Cancel button soll zum zurücksetzen der Auswahl $("#myGrid").resetSelection(); und laden Sie die raster. Der code wird ausgeführt, & nicht ein Fehler, sondern das nächste mal beforeSelectRow feuert (wenn das grid neu geladen wird), die id ist noch die gleiche, wie es war, als beforeSelectRow und onSelectRow ausgelöst, wenn ich klickte auf die Reihe, was bedeutet, dass ich nie wählen Sie eine neue Zeile, bis die gesamte Seite neu geladen wird. Nur auf der Seite geladen ist, wenn beforeSelectRow nicht ausgelöst.

BEARBEITEN

Folgenden ist der code für die Schaltfläche "Abbrechen", jetzt befindet sich im inneren des loadComplete Veranstaltung.

//catch the Cancel button click
$(this).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");
    //enable the dropdowns & clear the selection, reload grid
    console.log("ReloadGrid (inside Cancel function) ");
    lastSel = -1;
    $("#myGrid").trigger("reloadGrid");