jqGrid - Уникален идентификатор за нов ред

По-долу са дадени някои съвети за решаване на основния ви проблем и за подобряване на JavaScript кода, който сте публикували.

На първо място, генерирането на нови rowids локално е необходимо за сценарий за локално редактиране. Трябва да се генерират новите rowids на сървъра в случай на запазване на данните на бекенда в базата данни. Типичната реализация се състои в наличието на PRIMARY KEY дефиниран като int IDENTITY във всеки маса. Това прави идентификаторите уникални и фиксирани. Изтриването на някакъв ред и създаването на новия никога няма да се тълкува като редактиране на стария ред, тъй като новият ред ще получава винаги нов идентификатор, който никога не е бил използван преди (в таблицата).

За да се възползвате от идентификаторите, генерирани от страна на сървъра един има два основни избора:

1. презареждане на мрежата след всяка операция за добавяне на ред.
2. разширяване на комуникацията със сървъра при редактиране, така че сървърът да връща нов идентификатор, генериран в таблицата на базата данни, обратно към jqGrid. Може да се използва aftersavefunc обратно извикване (само за Добавяне на нов ред) за актуализиране на rowid след успешно създаване на реда на сървъра. Много стандартни реализации на услугите RESTful връщат обратно пълни данни за ред включващ идентификатор както за Добавяне, така и за Редактиране. Човек може да използва данните вътре в aftersavefunc обратно извикване и използвайте нещо като $("#" + rowid).attr("id", newRowid); за да актуализирате новия ред. Той записва идентификатора в някои допълнителни колони (като вие използвате скрит id). колона), тогава трябва да използвате setCell метод допълнително за актуализиране на клетката.

Първият избор е предимно прост и бих ви препоръчал да го приложите преди всичко. Само ако презареждането на мрежата няма да удовлетвори потребителите, които добавят много редове един след друг, тогава трябва да напишете още малко код и да приложите втория сценарий.

Текущият ви код използва inlineNav за операции за добавяне и редактиране, реализирани с помощта на вградено редактиране и метода navGrid за операция Изтриване, реализирана чрез редактиране на формуляри. Редактирането на формуляра, включително Delete, използва reloadAfterSubmit: true опция по подразбиране. Това означава, че мрежата ще бъде презаредена от сървъра (от url: "/RestWithDatabaseConnection/rest/fetchData" ) след изтриване на всеки ред. Можете да разрешите основния си проблем, като замените afterSaveFunction към следното:

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

Опцията current за задържане на текущата селекция след презареждане и опцията fromServer: true имат смисъл само в случай, че използвате loadonce: true опция допълнително. Можете просто да използвате reloadGridOptions: {fromServer: true} опция за navGrid за принудително презареждане на данните от сървъра при щракване върху бутона Refresh/Reload на навигационната лента. Ако нямате толкова много данни, които трябва да покажете в решетката (например по-малко от 1000 реда), тогава подобно поведение би било препоръчително.

Някои по-често срещани съвети за подобряване на кода си:

Можете да помислите да използвате height: "auto" вместо height: 250 и да управлявате максималната височина на мрежата, като зададете rowNum стойност. Опцията scrollOffset: 0 ще бъде ненужен в случая.

Форматът на данните, върнати от сървъра, изглежда така, че не внедрявате страници, сортиране и филтриране от страна на сървъра . Трябва да използвате loadonce: true и forceClientSorting: true настроики. loadonce: true информира jqGrid да запази всички данните, върнати от сървъра локално във вътрешни data параметър. Можете по всяко време да получите достъп до масива чрез използване на $('#grid').jqGrid("getGridParam", "data") . Стойността на rowNum (стойността по подразбиране е 20) ще се използва за локален пейджинг. sortname и sortorder ще се използва за локален сортиране. И ще използвате диалогов прозорец за търсене (добавен от navGrid ) или лентата с инструменти за филтриране (добавена от filterToolbar ) за локален търсене/филтриране. Той опростява сървърния код, подобрява производителността на мрежата от гледна точка на потребителя и опростява интерфейса между сървъра и клиента. Можете да използвате класическия RESTful интерфейс на сървъра без разширения.

Друга забележка:Бих ви препоръчал да премахнете ненужния скрит id колона (name:'id', label:'id', key: true, hidden: true, ... ). Информацията за rowid ще бъде запазена в id атрибут на редовете (<tr> елемент) и не е необходимо да се съхранява дублирана информация в скрития <td> елемент във всеки ред.

Има много други части от вашия код, които могат да бъдат подобрени. Например операцията DELETE, която използвате от страна на сървъра, изглежда странна. Използвате mtype: 'DELETE' , но изпращате идентификатора на изтрития ред вътре в body на заявката към сървъра, вместо да я добавя към URL адреса. Отговаря на стандартите, HTTP DELETE трябва да съдържа без тяло . Можете да използвате опцията jqGrid formDeleting за да посочите всички опции за изтриване и можете да дефинирате url параметър като функция:

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

Трябва по причина да промените вашия сървърен код на /RestWithDatabaseConnection/rest/delete/ да използвате същия комуникационен протокол и да получите идентификатора на изтрито от от URL адреса.

Можете да използвате navOptions параметър на безплатния jqGrid, за да посочите опциите на navGrid :

navOptions: { edit: false, add: false }

(searchtext: 'Search' и други опции, които използвате, изглежда имат стойности по подразбиране и аз премахнах там).

За да бъдете по-близо до стандартите REST, можете да използвате HTTP PUT операция за редактиране на ред и HTTP POST за добавяне на нови редове. Трябва да приложите различно входни точки и за двете операции в бекенда. Използвате /RestWithDatabaseConnection/rest/update вече и можете да внедрите /RestWithDatabaseConnection/rest/create за добавяне на нови редове. Можете да използвате следния inlineEditing промени например за изпълнение на сценария:

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