3

私はしばらくの間答えを探していましたが、私の質問に十分に答える答えを見つけることができません...

私は、インライン編集とフォーム編集の両方を利用し、blockUI を使用して、サーバーが作業を行っている間に「作業中」のメッセージを表示する JQ Grid を持っています。onclickSubmit をblockUIに、afterSubmitunblockUIに使用するため、これはフォームの編集/追加/削除に非常に効果的です。

Inline Editでこれを行う方法が見つからないため、問題が発生します。誰でもこれを達成する方法を提案できますか?

私が欲しいのは、「保存」アイコンがクリックされたときに(リクエストがサーバーに送信される前に)発生するイベントをどこでキャッチするかを知り、UIをブロックできるようにすることです。

サーバーから応答が返されたときに発生するイベントをキャッチする場所。

以下のように「editRow」または「saveRow」を使用してこれを行う方法があるはずですが、これらのようなコマンドをどこにどのイベントで配置するかがわかりません。


オレグの応答後に編集

「editRow」関数への呼び出しをどこに配置しますか? onSelectRow を使用すると、行を選択するとアクションが実行されます。これにより、グリッドの動作が変更されます。これは、[アクション] 列に「保存」ボタンが表示されないためです。インライン編集アイコンが選択されたときに呼び出されるように、「editRow」呼び出しをどこに置くことができますか?

    $(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
        });
    });
4

1 に答える 1

3

serializeRowDataたとえば、jqGrid のコールバックを使用するか、リクエストがサーバーに送信される前に/ajaxRowOptions.beforeSendを呼び出すために使用できます。たとえば、jqGrid オプションのリストに追加できます。blockUIblock

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

また

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

(または) との両方でunblockUI/を呼び出す必要があります。unblockaftersavefuncsuccessfuncerrorfunc

于 2013-02-08T20:31:47.817 に答える