jqGrid с localArray - встроенная навигация: получить кнопку удаления строки и вызвать пользовательскую функцию

Question

Я использую jqGrid с данными localArray. Я извлекаю этот массив из лазурной БД и перебираю в сетку. После этого при манипулировании каждой строкой я планирую обновить ее в БД.

Я использую встроенную панель навигации. При нажатии кнопки "добавить строку", "сохранить строку" и "удалить строку" я хочу вызвать свою пользовательскую функцию, а затем хотел бы сохранить / удалить данные в БД из этой функции.

Сначала я хотел бы знать, является ли мой дизайн правильным и масштабируемым или нет.

В настоящее время я могу вызывать пользовательскую функцию по нажатию кнопки сохранения, используя параметр "aftersavefunc".

Во-вторых, пожалуйста, дайте мне знать, какой параметр я должен установить для кнопки "Удалить строку". Я думаю, что для "Добавить строку", тот же параметр может работать, так как мы должны нажать кнопку "Сохранить строку", чтобы сохранить строку.

Мой код, как показано ниже для справки:

jQuery("#list4").jqGrid({
    datatype: "local",
    data: myData,
    height: "auto",
    colNames: ['RowNo', 'RouteId', 'Area'],
    colModel: [
        { name: 'id', index: 'id', width: 50, sortable: false },
        { name: 'RouteId', index: 'RouteId', width: 50, sortable: false },
        { name: 'Area', index: 'Area', width: 130, sortable: false, editable: true, editrules: { required: true} },
    ],
    multiselect: false,
    rownumbers: false,
    rowList: [10, 20, 30],
    pager: jQuery('#pager1'),
    viewrecords: true,
    caption: "Bus Schedule Data",
    editurl: "clientArray",
    restoreAfterSelect: false,
    loadonce: true
});
var rowid;
var inlineparams = {
    addParams: { useFormatter: false },
    editParams: {
        aftersavefunc: function (id) {
            var rowData = jQuery('#list4').jqGrid('getRowData', id);
            ScheduleTable.update({ id: 1, Area: rowData.Area.toString() });
        }
    },
    add: true,
    edit: true,
    save: true,
    cancel: true,
    del: true
};

jQuery("#list4").jqGrid('navGrid', "#pager1", { edit: false, save: false, add: false, cancel: false, del: false });
jQuery("#list4").jqGrid('inlineNav', "#pager1", inlineparams);
jQuery("#list4").jqGrid("saveRow", id, {
    keys: false,
    url: "clientArray"
});

Answer 1

у метода inlineNav нет опции del который вы используете (см. inlineparams). Вы должны использовать удалить del: false вариант navGrid чтобы кнопка Delete была реализована путем редактирования формы (см. метод delGridRow).

Я лично нахожу использование встроенного редактирования с сохранением данных в базе данных внутри aftersavefunc не лучший способ. У вас будут проблемы с реализацией обработки ошибок с использованием такого подхода, потому что изменения в сетке будут сначала сохранены локально, а затем вы попытаетесь обновить данные в базе данных. Если при сохранении у вас возникнут какие-либо ошибки (ошибки проверки, ошибки параллелизма и т. Д.), Вам придется восстановить предыдущее состояние данных в сетке. Таким образом, вы должны сохранить предыдущее состояние (внутри oneditfunc обратный вызов, например), а затем восстановить старые данные, если требуется.

Поэтому я рекомендую вам с точки зрения дизайна изменить datatype: "local" а также editurl: "clientArray" к оригинальным версиям на основе Ajax.

Если бы вы использовали стандартный способ, который предлагает jqGrid, вы могли бы общаться с сервером по Ajax. В случае, если сервер может вернуть описание ошибки, и пользователь сможет изменить текущие данные редактирования и попытаться сохранить их снова. Все, что вам нужно, это просто реализовать какой-либо серверный компонент (сервис веб-API ASP.NET, сервис WCF ASP.NET, контроллер ASP.NET MVC, веб-сервис ASMX, обработчик ASHX и т. Д.). Все технологии (даже самые старые, такие как ASMX WebService и ASHX-обработчик) можно использовать с Windows Azure.

Если вы решите следовать своему первоначальному способу, вы можете реализовать удаление с помощью редактирования формы. Я описал здесь изначально, как это реализовать в случае editurl: "clientArray", В ответе я опубликовал способ использования полного набора операций редактирования формы с локальными данными. Другой ответ содержит обновленный код, который работает с текущей версией (4.4.1 и 4.4.4) jqGrid. Я рекомендую вам использовать delSettings из последнего ответа. onclickSubmit обратный вызов delSettings сделать все необходимое для локального сохранения данных.

Небольшие общие замечания к вашему коду:

• Я нахожу странным использование обоих id а также RouteId в одной сетке. Наверное id не нужно вообще, и вы можете добавить key: true в качестве дополнительной собственности к RouteId если это действительно уникальный id из базы данных в вашем случае
• Вы можете удалить index свойство из всех столбцов, потому что значения, которые вы используете, совпадают со значениями name имущество.
• Вы можете удалить sortable: false (или оба width: 50 а также sortable: false) от colModel и использовать вместо этого cmTemplate: {sortable: false} (или же cmTemplate: {width: 50, sortable: false}). Смотрите здесь для получения дополнительной информации.
• Вы можете удалить multiselect: false, rownumbers: false а также restoreAfterSelect: false настройки jqGrid. Первые два имеют значения по умолчанию (см. Столбец "Default1" в таблице со списком параметров). Последний вариант (restoreAfterSelect: false) это вариант inlineNav поэтому его следует использовать, если это необходимо, внутри inlineparams,
• Вы должны заменить pager: jQuery('#pager1') в pager: '#pager1', jqGrid нужно иметь pager как селектор идентификатора. Если вы введете входной параметр в другой форме, jqGrid обнаружит ошибку и заменит #pager1
• Я рекомендую вам использовать gridview: true опции во всех ваших сетках для повышения производительности без каких-либо других недостатков (подробности см. в ответе)