jqGrid - Unikt ID för ny rad

Nedan finns några råd för att lösa ditt huvudproblem och för att förbättra JavaScript-koden som du postade.

Först av allt, genereringen av nya rader lokalt krävs för lokal redigeringsscenario. Man bör generera de nya raderna på servern i händelse av att data sparas på backend i databasen. En typisk implementering består i att ha PRIMARY KEY definieras som int IDENTITY i varje tabell. Det gör ID:n unika och fixerade. Att ta bort en rad och skapa en ny kommer aldrig att tolkas som redigering av den gamla raden eftersom den nya raden alltid får ett nytt id, som aldrig användes tidigare (i tabellen).

För att dra nytta av ID som genereras på serversidan man har två huvudval:

ladda om rutnätet efter varje Lägg till rad-operation.
förlänger kommunikationen med servern vid redigering så att servern returnerar nytt id, genererat i databastabellen, tillbaka till jqGrid. Man kan använda aftersavefunc callback (endast för Lägg till ny rad) för att uppdatera raden efter att raden skapats på servern. Många standardimplementeringar av RESTful-tjänster ger tillbaka full raddata inklusive id på både Lägg till eller Redigera. Man kan använda data inuti aftersavefunc återuppringning och använd något som $("#" + rowid).attr("id", newRowid); för att uppdatera den nya raden. Den sparade id:t i ytterligare några kolumner (som du använder dolt id kolumn) så ska man använda setCell metod dessutom för att uppdatera cellen också.

Det första valet är oftast det enkla och jag skulle rekommendera dig att implementera det först och främst. Endast om omladdning av rutnätet inte kommer att tillfredsställa användarna, som lägger till många rader efter varandra, bör du skriva lite mer kod och implementera det andra scenariot.

Din nuvarande kod använder inlineNav för lägg till och redigera operationer, implementerade med inline-redigering, och metoden navGrid för raderingsoperation, implementerad med formulärredigering. Formulärredigering, inklusive Ta bort, använder reloadAfterSubmit: true alternativ som standard. Det betyder att rutnätet kommer att laddas om från servern (från url: "/RestWithDatabaseConnection/rest/fetchData" ) efter borttagning av varje rad. Du kan lösa ditt huvudproblem genom att ersätta afterSaveFunction till följande:

var afterSaveFunction = function () {
        $(this).trigger("reloadGrid", [{current: true, fromServer: true}]);
    };

Alternativet current för att behålla det aktuella valet efter omladdning och alternativet fromServer: true har mening endast om du använder loadonce: true alternativ dessutom. Du kan bara använda reloadGridOptions: {fromServer: true} alternativet navGrid för att tvinga om att ladda om data från servern klicka på knappen Uppdatera/Ladda om i navigatorfältet. Om du inte har så mycket data som du behöver visa i rutnätet (till exempel mindre som 1 000 rader) skulle ett sådant beteende rekommenderas.

Några vanligare råd till dig för att förbättra din kod:

Du kan överväga att använda height: "auto" istället för height: 250 och för att hantera den maximala höjden på rutnätet genom att ange rowNum värde. Alternativet scrollOffset: 0 kommer att vara onödiga i fallet.

Formatet på data som returneras från servern ser ut så att du inte implementerar sökning, sortering och filtrering på serversidan . Du bör använda loadonce: true och forceClientSorting: true alternativ. loadonce: true informerar jqGrid att spara alla data som returneras från servern lokalt i interna data parameter. Du kan när som helst komma åt arrayen genom att använda $('#grid').jqGrid("getGridParam", "data") . Värdet för rowNum (standardvärdet är 20) kommer att användas för lokal personsökning. sortname och sortorder kommer att användas för lokal sortering. Och du kommer att använda sökdialogen (tillagd av navGrid ) eller filterverktygsfältet (tillagt av filterToolbar ) för lokal sökning/filtrering. Det förenklar serverkoden, förbättrar nätets prestanda ur användarens synvinkel och förenklar gränssnittet mellan servern och klienten. Du kan använda det klassiska RESTful-gränssnittet på servern utan några tillägg.

En annan anmärkning:Jag skulle rekommendera dig att ta bort onödiga dolt id kolumn (name:'id', label:'id', key: true, hidden: true, ... ). Informationen om rowiden kommer att sparas i id attribut för raderna (<tr> element) och man behöver inte ha dubblettinformation i den dolda <td> element i varje rad.

Det finns många andra delar av din kod som kan förbättras. Till exempel verkar DELETE-operationen som du använder på serversidan vara konstig. Du använder mtype: 'DELETE' , men du skickar ID för raderad rad inuti kropp av begäran till servern istället för att lägga till den i URL:en. Motsvarar standarderna, HTTP DELETE bör innehålla ingen text . Du kan använda jqGrid-alternativet formDeleting för att ange alla raderingsalternativ och du kan definiera url parameter som funktion:

formDeleting: {
    mtype: "DELETE",
    url: function (rowid) {
        return "/RestWithDatabaseConnection/rest/delete/" + rowid;
    },
    ajaxDelOptions: { contentType: "application/json" },
    serializeDelData: function () {
        return "";
    }
}

Du måste av orsak ändra din serverkod för /RestWithDatabaseConnection/rest/delete/ för att använda samma kommunikationsprotokoll och för att få id för borttaget från från URL:en.

Du kan använda navOptions parameter för free jqGrid för att specificera alternativen för navGrid :

navOptions: { edit: false, add: false }

(searchtext: 'Search' och andra alternativ som du använder verkar ha standardvärden och jag tog bort det).

För att komma närmare REST-standarder kan man använda HTTP PUT-operation för radredigering och HTTP POST för att lägga till nya rader. Du bör implementera annorlunda ingångspunkter för båda operationerna på backend. Du använder /RestWithDatabaseConnection/rest/update redan och du kan implementera /RestWithDatabaseConnection/rest/create för att lägga till nya rader. Du kan använda följande inlineEditing ändringar till exempel för att implementera scenariot:

inlineNavOptions: { add: true, edit: true },
inlineEditing: {
    url: function (id, editOrAdd) {
        return "/RestWithDatabaseConnection/rest/" +
            (editOrAdd === "edit" ? "update" : "create");
    },
    mtype: function (editOrAdd) {
        return editOrAdd === "edit" ? "PUT" : "POST";
    },
    keys: true,
    serializeSaveData: function (postData) {
        return JSON.stringify(dataToSend);
    },
    aftersavefunc: function () {
        $(this).trigger("reloadGrid", [{current: true, fromServer: true}]);
    },
    addParams: {
        addRowParams: {
            position: "last",
            serializeSaveData: function (postData) {
                var dataToSend = $.extend({}, postData);
                // don't send any id in case of creating new row
                // or to send `0`:
                delete dataToSend.id; // or dataToSend.id = 0; 
                return JSON.stringify(dataToSend);
            }
        }
    }
}