jqgrid события onClickSubmit и afterSubmit встроенной кнопки «Сохранить»

Я некоторое время искал ответ и не могу найти тот, который достаточно отвечает на мой вопрос...

У меня есть JQ Grid, который использует как встроенное редактирование, так и редактирование формы, а также использует blockUI для отображения «рабочего» сообщения, пока сервер выполняет свои функции. это прекрасно работает для редактирования/добавления/удаления формы, так как я использую onclickSubmit для blockUI и afterSubmit для unblockUI .

Проблема возникает из-за того, что я не могу найти способ сделать это в Inline Edit. Может ли кто-нибудь предложить способ достижения этого?

Я хочу знать, где поймать событие, которое запускается при нажатии значка «Сохранить» (до того, как запрос будет отправлен на сервер), чтобы я мог заблокировать UI:

и где поймать событие, которое запускается, когда ответ отправляется обратно с сервера.

Должен быть способ сделать это с помощью «editRow» или «saveRow», как показано ниже, но я не могу понять, где и в каких событиях помещать такие команды, как эти.


РЕДАКТИРОВАТЬ после ответа Олега

Где бы я поместил вызов функции «editRow»? Если я использую onSelectRow, он действует при выборе строки - это меняет поведение сетки - поскольку теперь она не показывает кнопку «Сохранить» в столбце «Действие». Где я могу поместить вызов «editRow», чтобы он запускался при выборе значка редактирования inLine?

    $(document).ready(function() {
        $('#jpgCustomers').jqGrid({
            //url from wich data should be requested
            url: '@Url.Action("Customers")',
            //type of data
            datatype: 'json',
            //url access method type
            mtype: 'POST',
            serializeRowData: function(postData) {
                $.blockUI({message: ("#working")});
                return postData;
            },
            //columns model
            //columns names
            colNames: ['No.', 'Name', 'FullName', 'Description', 'Enabled', 'Email Address', 'Phone', 'Pager', 'Fax', 'Comments', ' '],
            colModel: [
                //displayed Columns
                { name: 'Number', index: 'Number', align: 'center', width: 40, editable: false, search: false },
                { name: 'LogonName', index: 'LogonName', align: 'left', width: 80, editable: true, search: true, stype: 'text', editrules: { required: true } },
                { name: 'FullName', index: 'FullName', align: 'left', width: 200, editable: true, search: true, stype: 'text', editrules: { required: true } },
                { name: 'Description', index: 'Description', align: 'left', width: 300, editable: true, search: true, stype: 'text' },
                { name: 'Enabled', index: 'Enabled', align: 'center', width: 80, editable: true, formatter: SFTPEnabledFormatter, unformat: SFTPEnabledUnformatter, edittype: 'select', editoptions: { value: '-2:Inherited;0:Disabled;1:Enabled' }, search: true, stype: 'select', searchoptions: { value: "-1:All;-2:Inherited;1:Enabled;0:Disabled" } },
                //Hidden Columns
                { width: 60, name: 'Email', index: 'Email', hidden: true, editable: true, editrules: { required: true, edithidden: true }, editype: 'email' },
                { width: 60, name: 'Phone', index: 'Phone', hidden: true, editable: true, editrules: { required: false, edithidden: true, number: true, minValue: 0 }, editype: 'text' },
                { width: 60, name: 'Pager', index: 'Pager', hidden: true, editable: true, editrules: { required: false, edithidden: true, number: true, minValue: 0 }, editype: 'text' },
                { width: 60, name: 'Fax', index: 'Fax', hidden: true, editable: true, editrules: { required: false, edithidden: true, number: true, minValue: 0 }, editype: 'text' },
                { width: 120, name: 'Comments', index: 'Comments', align: 'left', hidden: true, editable: true, editrules: { required: false, edithidden: true }, edittype: 'textarea', editoptions: { rows: '3', cols: '60' } },
                //Action column
                {
                    name: 'myac',
                    width: 80,
                    fixed: true,
                    sortable: false,
                    resize: false,
                    editable: false,
                    search: false,
                    formatter: 'actions',
                    formatoptions: {
                        onSuccess: function(response) {
                            debugger;
                            $.unblockUI();
                                var jsonResponse = $.parseJSON(response.responseText);
                                if (jsonResponse.State != 'Success') {
                                    return [false, jsonResponse.ResponseMessage];
                                } else {
                                    return [true];
                                }                            },
                        onError :function(rowid, response, textStatus) {
                            debugger;
                            $.unblockUI();
                        },
                        keys: true,
                        delOptions: {
                            url: encodeURI('@Url.Action("DeleteCustomer")'),
                            onclickSubmit: function(params, posdata) {
                                $.blockUI({message: ("#working")});
                            },
                            afterSubmit: function(response, postData) {
                                $.unblockUI();
                                var jsonResponse = $.parseJSON(response.responseText);
                                if (jsonResponse.State != 'Success') {
                                    return [false, jsonResponse.ResponseMessage];
                                } else {
                                    return [true];
                                }
                            },
                            beforeShowForm: function(form) {
                                var dlgDiv = $("#delmod" + jpgCustomers.id);
                                CenterDialog(dlgDiv);
                                var sel_id = $("#DelData>td:nth-child(1)").text();
                                $("td.delmsg", form).html("Delete User <b>" + $("#jpgCustomers").jqGrid('getCell', sel_id, 'LogonName') + "</b>?");
                            }
                        }
                    }
                }
            ],
            reloadAfterSubmit: true, 
            //pager for grid
            pager: $('#jpgpCustomers'),
            //number of rows per page
            rowNum: @(Model.RowsInCustomerGrid),
            //initial sorting column
            sortname: 'FullName',
            //initial sorting direction
            sortorder: 'asc',
            //we want to display total records count
            viewrecords: true,
            //grid height
            height: '100%',
            //where to go on submit of edit/add
            editurl: encodeURI('@Url.Action("EditCustomer")'),
            //subgrid
        });
    });

person Andrew Humphries    schedule 08.02.2013    source источник


Ответы (1)


Например, вы можете использовать обратный вызов serializeRowData для jqGrid или использовать ajaxRowOptions.beforeSend для вызова blockUI/block до того, как запрос будет отправлен на сервер. Например, вы можете добавить в список параметров jqGrid

serializeRowData: function (postdata) {
    $(this).block({message: "<h1>Saving the data...</h1>"});
    return postdata;
}

or

ajaxRowOptions: {
    beforeSend: function () {
        $("#grid").block({message: "<h1>Saving the data...</h1>"});
    }
}

Вы должны позвонить unblockUI/unblock как в aftersavefunc (или successfunc), так и в errorfunc.

person Oleg    schedule 08.02.2013
comment
Олег, большое спасибо за ответ. SerializeRowData сработал, спасибо, но у меня есть дополнительные вопросы о расположении вызова команды editRow. Я обновил вопрос выше, я был бы очень признателен, если бы вы могли быстро взглянуть! Спасибо! - person Andrew Humphries; 11.02.2013
comment
@AndrewHumpries: Добро пожаловать! Очень сложно ответить на вопрос, если опубликовать только небольшую часть кода, который он использует. Существует множество различных способов использования встроенного редактирования. Вы написали про какую-то кнопку Сохранить, но не ясно описываете, что имеете в виду. Это кнопка, созданная inlineNav или созданная formatter: "action", или созданная вашим пользовательским средством форматирования, или ... Используете ли вы некоторую комбинацию некоторых из вышеперечисленных методов? Точное место, где вы должны указать aftersavefunc и errorfunc, зависит от ответов на вопросы. Как именно вы используете встроенное редактирование? - person Oleg; 11.02.2013
comment
Привет олег, я добавил более полный пример к вышеуказанному вопросу. - person Andrew Humphries; 11.02.2013
comment
Я использую formatter:action. Я также исследовал способы сделать это, используя OnSuccess: и OnError: для UnBlockUI... это, похоже, работает, однако..... Когда я пытаюсь выполнить действие BlockUI в serializeDatarow или ajaxRowOptions, даже если он вызывается, он фактически не блокирует пользовательский интерфейс, как ожидалось. Вы видите какие-либо проблемы? - person Andrew Humphries; 11.02.2013
comment
Кроме того, несмотря на то, что команда blockUI выполняется до того, как данные будут отправлены на сервер, похоже, что она действует только после возврата ответа на событие onSuccess. (как только данные возвращаются, на экране «вспыхивает» сообщение blockUI) - person Andrew Humphries; 11.02.2013
comment
@AndrewHumpries: Какую версию jqGrid вы используете? Вы пытались использовать afterSave вместо onSuccess? Вы отлаживали код? Вызывается ли обратный вызов onSuccess (afterSave) или onError при сохранении строки? - person Oleg; 11.02.2013