jqGrid - Unieke ID voor nieuwe rij

Hieronder vindt u enkele adviezen om uw belangrijkste probleem op te lossen en de JavaScript-code die u heeft gepost te verbeteren.

Allereerst het genereren van nieuwe rowids lokaal is vereist voor een lokaal bewerkingsscenario. Men zou de nieuwe rowids op de server moeten genereren in het geval van het opslaan van de gegevens op de backend in de database. Typische implementatie bestaat uit het hebben van PRIMARY KEY gedefinieerd als int IDENTITY in elke tafel. Het maakt de ID's uniek en vast. Het verwijderen van een rij en het maken van een nieuwe zal nooit worden geïnterpreteerd als het bewerken van de oude rij, omdat de nieuwe rij altijd een nieuwe id krijgt, die nog nooit eerder is gebruikt (in de tabel).

Om te profiteren van ID's die aan de serverkant zijn gegenereerd men heeft twee hoofdkeuzes:

1. het raster herladen na elke bewerking voor het toevoegen van een rij.
2. het verlengen van de communicatie met de server bij het bewerken, zodat de server een nieuwe id, gegenereerd in de databasetabel, terugstuurt naar jqGrid. Men kan aftersavefunc . gebruiken callback (alleen voor Nieuwe rij toevoegen) voor het bijwerken van de rowid nadat de rij op de server is gemaakt. Veel standaardimplementaties van RESTful-services retourneren volledige rijgegevens inclusief id op zowel Toevoegen als Bewerken. Men kan de gegevens gebruiken in aftersavefunc callback en gebruik iets als $("#" + rowid).attr("id", newRowid); om de nieuwe rij bij te werken. Het heeft de id in enkele extra kolommen opgeslagen (zoals u verborgen id gebruikt) kolom) dan moet men setCell . gebruiken methode om de cel ook bij te werken.

De eerste keuze is meestal eenvoudig en ik zou u aanraden om het eerst te implementeren. Alleen als het herladen van het raster de gebruikers niet tevreden stelt, die veel rijen na elkaar toevoegen, moet je wat meer code schrijven en het tweede scenario implementeren.

Je huidige code gebruikt inlineNav voor bewerkingen voor toevoegen en bewerken, geïmplementeerd met behulp van inline bewerking, en de methode navGrid voor de bewerking Verwijderen, geïmplementeerd met behulp van formulierbewerking. De formulierbewerking, inclusief Delete, gebruikt reloadAfterSubmit: true optie standaard. Dit betekent dat het raster opnieuw wordt geladen vanaf de server (van url: "/RestWithDatabaseConnection/rest/fetchData" ) na het verwijderen van elke rij. U kunt uw belangrijkste probleem oplossen door afterSaveFunction te vervangen naar het volgende:

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

De optie current om de huidige selectie vast te houden na het herladen en de optie fromServer: true heb alleen zin als je loadonce: true . gebruikt optie extra. Je kunt gewoon reloadGridOptions: {fromServer: true} . gebruiken optie van navGrid om het herladen van de gegevens van de server te forceren klik op de knop Vernieuwen/Opnieuw laden van de navigatiebalk. Als u niet zoveel gegevens heeft die u in het raster moet weergeven (bijvoorbeeld minder dan 1000 rijen), wordt dergelijk gedrag aanbevolen.

Enkele meer algemene adviezen om uw code te verbeteren:

U kunt overwegen om height: "auto" . te gebruiken in plaats van height: 250 en om de maximale hoogte van het raster te beheren door rowNum . op te geven waarde. De optie scrollOffset: 0 zal in het geval niet nodig zijn.

Het formaat van de gegevens die door de server worden geretourneerd, ziet er zo uit dat u geen paging, sortering en filtering aan de serverzijde heeft geïmplementeerd . Gebruik loadonce: true en forceClientSorting: true opties. De loadonce: true informeert jqGrid om alles op te slaan de gegevens die lokaal door de server worden geretourneerd in interne data parameter. U kunt op elk moment toegang krijgen tot de array door gebruik te maken van $('#grid').jqGrid("getGridParam", "data") . De waarde van rowNum (de standaardwaarde is 20) wordt gebruikt voor lokaal oproepen. De sortname en de sortorder wordt gebruikt voor lokaal sorteren. En u zult de zoekdialoog gebruiken (toegevoegd door navGrid ) of de filterwerkbalk (toegevoegd door filterToolbar ) voor lokaal zoeken/filteren. Het vereenvoudigt de servercode, verbetert de prestaties van het raster vanuit het oogpunt van de gebruiker en vereenvoudigt de interface tussen de server en de client. U kunt de klassieke RESTful-interface op de server gebruiken zonder extensies.

Nog een opmerking:ik raad je aan om onnodige verborgen id te verwijderen kolom (name:'id', label:'id', key: true, hidden: true, ... ). De informatie over de rowid wordt opgeslagen in id attribuut van de rijen (<tr> element) en je hoeft geen dubbele informatie te bewaren in de verborgen <td> element in elke rij.

Er zijn veel andere delen van uw code die kunnen worden verbeterd. De DELETE-bewerking die u aan de serverzijde gebruikt, lijkt bijvoorbeeld vreemd. Je gebruikt mtype: 'DELETE' , maar je stuurt de id van de verwijderde rij in body van het verzoek naar de server in plaats van het toe te voegen aan de URL. Komt overeen met de standaarden, de HTTP DELETE zou geen body moeten bevatten . U kunt de jqGrid-optie formDeleting . gebruiken om alle verwijderopties te specificeren en u kunt url define definiëren parameter als functie:

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

U moet uw servercode van /RestWithDatabaseConnection/rest/delete/ wijzigen om hetzelfde communicatieprotocol te gebruiken en om de id van verwijderd uit de URL te krijgen.

U kunt navOptions . gebruiken parameter van gratis jqGrid om de opties van navGrid te specificeren :

navOptions: { edit: false, add: false }

(searchtext: 'Search' en andere opties die u gebruikt, lijken standaardwaarden te hebben en die heb ik daar verwijderd).

Om dichter bij de REST-standaarden te zijn, kan de HTTP PUT-bewerking worden gebruikt voor het bewerken van rijen en HTTP POST voor het toevoegen van nieuwe rijen. U moet anders implementeren toegangspunten voor beide bewerkingen op de backend. U gebruikt /RestWithDatabaseConnection/rest/update al en je kunt /RestWithDatabaseConnection/rest/create . implementeren voor het toevoegen van nieuwe rijen. U kunt de volgende inlineEditing . gebruiken wijzigingen om bijvoorbeeld het scenario te implementeren:

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