azure - Azure Mobile Services テーブルのインライン編集 (編集) を実装する方法。エラー処理の処理方法

Question

Azure サービスのデータでjqGrid ( inlineNav) を使用しており、Azure モバイル サービス テーブルを使用したインライン編集とエラー処理について学習することに興味があります。

考えを共有してください。

コードの更新 1ondblClickRow : Oleg の推奨する使用方法、EnterおよびEscapeメカニズムに基づくコードの更新

$("#list4").jqGrid({
    url: myTableURL,
    datatype: "json",
    height: "auto",
    colNames: ['RowNo', 'RouteId', 'Area'],
    colModel: [
        { name: 'id', width: 70, editable: false },
        { name: 'RouteId', width: 70 },
        { name: 'Area', width: 150 }}
    ],
    cmTemplate: { editable: true, editrules: { required: true} },
    rowList: [10, 20, 30],
    rowNum: 10,
    sortname: "id",
    prmNames: { search: null, nd: null },
    ondblClickRow: function (rowid) {
        var $self = $(this);

        $self.jqGrid("editRow", rowid, {
            mtype: "PATCH",
            keys: true,
            url: myTableURL + "/" +
                $.jgrid.stripPref($self.jqGrid("getGridParam", "idPrefix"), rowid)
        });
    },
    ajaxGridOptions: {
        contentType: "application/json",
        headers: {
            "X-ZUMO-APPLICATION": "myKey"
        }
    },
    serializeGridData: function (postData) {
        if (postData.sidx) {
            return {
                $top: postData.rows,
                $skip: (parseInt(postData.page, 10) - 1) * postData.rows,
                $orderby: postData.sidx + " " + postData.sord,
                $inlinecount: "allpages"
            };
        } else {
            return {
                $top: postData.rows,
                $skip: (parseInt(postData.page, 10) - 1) * postData.rows,
                $inlinecount: "allpages"
            };
        }
    },
    serializeRowData: function (postData) {
        var dataToSend = $.extend(true, {}, postData);
        if (dataToSend.hasOwnProperty("oper")) {
            delete dataToSend.oper;
        }
        if (dataToSend.hasOwnProperty("id")) {
            delete dataToSend.id;
        }
        return JSON.stringify(dataToSend);
    },
    beforeProcessing: function (data, textStatus, jqXHR) {
        var rows = parseInt($(this).jqGrid("getGridParam", "rowNum"), 10);
        data.total = Math.ceil(data.count / rows);
    },
    jsonReader: {
        repeatitems: false,
        root: "results",
        records: "count"
    },
    loadError: function (jqXHR, textStatus, errorThrown) {
        alert('HTTP status code: ' + jqXHR.status + '\n' +
            'textStatus: ' + textStatus + '\n' +
            'errorThrown: ' + errorThrown);
        alert('HTTP message body (jqXHR.responseText): ' + '\n' + jqXHR.responseText);
    },
    pager: '#pager1',
    viewrecords: true,
    caption: "Schedule Data",
    gridview: true,
    autoencode: true
});

インライン編集とサーバー側のページングを組み合わせたコード:

                        var $grid = $("#list4"),
azureHeaders = { "X-ZUMO-APPLICATION": "mykey" },
myTableURL = "https://mohit.azure-mobile.net/tables/Schedules",
inlineNavParams = {
    save: false, // we want to add Save button manually. So we needn't no standard button
    edit: true, add: true, del: true,
    editParams: { mtype: "PATCH" },
    addParams: {
        addRowParams: {
            //mtype: "POST", // default value
            aftersavefunc: function (rowid, response) {
                var rowData = $.parseJSON(response.responseText),
                    newId = rowData.id,
                    $self = $(this),
                    idPrefix = $self.jqGrid("getGridParam", "idPrefix", newId),
                    selrow = $self.jqGrid("getGridParam", "selrow", newId),
                    selArrayRow = $self.jqGrid("getGridParam", "selarrrow", newId),
                    oldId = $.jgrid.stripPref(idPrefix, rowid),
                    dataIndex = $self.jqGrid("getGridParam", "_index", newId),
                    i;
                // update id in the _index
                if (dataIndex != null && dataIndex[oldId] !== undefined) {
                    dataIndex[newId] = dataIndex[oldId];
                    delete dataIndex[oldId];
                }
                // update id attribute in <tr>
                $("#" + $.jgrid.jqID(rowid)).attr("id", idPrefix + newId);
                // update id of selected row
                if (selrow === rowid) {
                    $self.jqGrid("setGridParam", { selrow: idPrefix + newId });
                }
                // update id in selarrrow array
                // in case of usage multiselect:true option
                if ($.isArray(selArrayRow)) {
                    i = $.inArray(rowid, selArrayRow);
                    if (i >= 0) {
                        selArrayRow[i] = idPrefix + newId;
                    }
                }
                // the next line is required if we use ajaxRowOptions: { async: true }
                $self.jqGrid("showAddEditButtons");
            }
        }
    }
};

// set common options which we want to use in inline editing
                  $.extend(true, $.jgrid.inlineEdit, {
keys: true,
afterrestorefunc: function () {
    $(this).jqGrid("showAddEditButtons");
},
aftersavefunc: function () {
    $(this).jqGrid("showAddEditButtons");
},
                });

               $grid.jqGrid({
colNames: ['RouteId', 'Area'],
        colModel: [
                      { name: 'RouteId', index: 'RouteId', width: 70 },
                      { name: 'Area', index: 'Area', width: 150 }
                  ],
        cmTemplate: { editable: true, editrules: { required: true} },
// the parameters below are needed to load the grid data from the server
// we use loadonce: true option below. One can use server side pading instead.
// see http://stackoverflow.com/a/15979809/315935 for the changes
url: myTableURL,
rownumbers: true,
datatype: "json",
rowNum: 10,
rowList: [10, 20, 30],
prmNames: {search: null, nd: null, sort: null, rows: null},
ajaxGridOptions: { contentType: "application/json", headers: azureHeaders },
                 // jsonReader: {
               //     repeatitems: false,
                   //     root: function (obj) { return obj; }
                   // },
                  jsonReader: {
            repeatitems: false,
            root: "results",
            records: "count"
        },
loadError: function (jqXHR, textStatus, errorThrown) {
            alert('HTTP status code: ' + jqXHR.status + '\n' +
                'textStatus: ' + textStatus + '\n' +
                'errorThrown: ' + errorThrown);
            alert('HTTP message body (jqXHR.responseText): ' + '\n' + jqXHR.responseText);
        },
gridview: true,
autoencode: true,
height: "auto",
                   // we implement additionally inline editing on double-click.
                  // it's optional step in case of usage inlineNav
                ondblClickRow: function (rowid) {
    var $self = $(this);

    $self.jqGrid("editRow", rowid, {
        mtype: "PATCH",
        keys: true,
        url: myTableURL + "/" +
            $.jgrid.stripPref($self.jqGrid("getGridParam", "idPrefix"), rowid)
    });
},
                     // next options are important for inline editing
                     ajaxRowOptions: { contentType: "application/json", headers: azureHeaders },
editurl: myTableURL,
serializeRowData: function (postData) {
            var dataToSend = $.extend(true, {}, postData);
            if (dataToSend.hasOwnProperty("oper")) {
                delete dataToSend.oper;
            }
            if (dataToSend.hasOwnProperty("id")) {
                delete dataToSend.id;
            }
            return JSON.stringify(dataToSend);
        },

serializeGridData: function (postData) {
    if (postData.sidx) {
        return {
            $top: postData.rows,
            $skip: (parseInt(postData.page, 10) - 1) * postData.rows,
            $orderby: postData.sidx + " " + postData.sord,
            $inlinecount: "allpages"
        };
    } else {
        return {
            $top: postData.rows,
            $skip: (parseInt(postData.page, 10) - 1) * postData.rows,
            $inlinecount: "allpages"
        };
    }
},

beforeProcessing: function (data, textStatus, jqXHR) {
            var rows = parseInt($(this).jqGrid("getGridParam", "rowNum"), 10);
            data.total = Math.ceil(data.count/rows);
        },

viewrecords: true,
rownumbers: true,
height: "auto",
pager: "#pager1",
caption: "Windows Azure Mobile Services REST API"
           }).jqGrid("navGrid", "#pager1", { edit: false, add: false, del: false, search: false });

             $grid.jqGrid("inlineNav", "#pager1", inlineNavParams);

                $grid.jqGrid("navButtonAdd", "#pager1", {
caption: $.jgrid.nav.savetext || "",
title: $.jgrid.nav.savetitle || "Save row",
buttonicon: "ui-icon-disk",
id: $grid[0].id + "_ilsave",
onClickButton: function () {
    var $self = $(this),
        gridIdSelector = $.jgrid.jqID(this.id),
        savedRow = $self.jqGrid("getGridParam", "savedRow"),
        prmNames = $self.jqGrid("getGridParam", "prmNames"),
        editUrl = $self.jqGrid("getGridParam", "editurl"),
        rowid = savedRow != null ? savedRow[0].id : "",
        id = $.jgrid.stripPref($self.jqGrid("getGridParam", "idPrefix"), rowid),
        tmpParams = {};

    if (rowid != null) {
        if ($("#" + $.jgrid.jqID(rowid), "#" + gridIdSelector).hasClass("jqgrid-new-row")) {
            if (!inlineNavParams.addParams.addRowParams.extraparam) {
                inlineNavParams.addParams.addRowParams.extraparam = {};
            }
            inlineNavParams.addParams.addRowParams.extraparam[prmNames.oper] = prmNames.addoper;
            tmpParams = inlineNavParams.addParams.addRowParams;
        } else {
            if (!inlineNavParams.editParams.extraparam) {
                inlineNavParams.editParams.extraparam = {};
            }
            inlineNavParams.editParams.extraparam[prmNames.oper] = prmNames.editoper;
            inlineNavParams.editParams.url = editUrl + "/" + id;
            tmpParams = inlineNavParams.editParams;
        }
        if ($self.jqGrid("saveRow", rowid, tmpParams)) {
            $self.jqGrid("showAddEditButtons");
        }
    } else {
        $.jgrid.viewModal("#alertmod", {gbox: "#gbox_" + gridIdSelector, jqm: true});
        $("#jqg_alrt").focus();
    }
}
                });
                 $("#" + $grid[0].id + "_ilsave").addClass("ui-state-disabled");

コードの更新 3:

                      var $grid = $("#list4");
    var myTableURL = 'https://mohit.azure-mobile.net/tables/Schedules';
    var azureHeaders = { "X-ZUMO-APPLICATION": ", mykey" };

    $grid.jqGrid({
        url: myTableURL,
        editurl: myTableURL,
        datatype: "json",
        height: "auto",
        colNames: ['RowNo', 'RouteId', 'Area', 'BusStop', 'Seater', 'Lat', 'Long', 'Timing', 'FromTo', 'KeyPoint'],
        colModel: [
                      { name: 'id', index: 'id', width: 70, editable: false },
                      { name: 'RouteId', index: 'RouteId', width: 70 }
                                            ],
        cmTemplate: { editable: true, editrules: { required: true} },
        rowList: [10, 20, 30],
        rowNum: 10,
        sortname: "id",
        prmNames: { search: null, nd: null},
        ondblClickRow: function (rowid) {
            var $self = $(this);

            $self.jqGrid("editRow", rowid, {
                mtype: "PATCH",
                keys: true,
                url: myTableURL + "/" + $.jgrid.stripPref($self.jqGrid("getGridParam", "idPrefix"), rowid)
            });
        },

        ajaxGridOptions: { contentType: "application/json", headers: azureHeaders },
        ajaxRowOptions: { contentType: "application/json", headers: azureHeaders },

        serializeGridData: function (postData) {
            if (postData.sidx) {
                return {
                    $top: postData.rows,
                    $skip: (parseInt(postData.page, 10) - 1) * postData.rows,
                    $orderby: postData.sidx + " " + postData.sord,
                    $inlinecount: "allpages"
                };
            }
            else {
                return {
                    $top: postData.rows,
                    $skip: (parseInt(postData.page, 10) - 1) * postData.rows,
                    $inlinecount: "allpages"
                };
            }
        },
        serializeRowData: function (postData) {
            var dataToSend = $.extend(true, {}, postData);
            if (dataToSend.hasOwnProperty("oper")) {
                delete dataToSend.oper;
            }
            if (dataToSend.hasOwnProperty("id")) {
                delete dataToSend.id;
            }
            return JSON.stringify(dataToSend);
        },
        beforeProcessing: function (data, textStatus, jqXHR) {
            var rows = parseInt($(this).jqGrid("getGridParam", "rowNum"), 10);
            data.total = Math.ceil(data.count / rows);
        },
        jsonReader: {
            repeatitems: false,
            root: "results",
            records: "count"
        },
        loadError: function (jqXHR, textStatus, errorThrown) {
            alert('HTTP status code: ' + jqXHR.status + '\n' +
                                                                    'textStatus: ' + textStatus + '\n' +
                                                                    'errorThrown: ' + errorThrown);
            alert('HTTP message body (jqXHR.responseText): ' + '\n' + jqXHR.responseText);
        },
        pager: '#pager1',
        viewrecords: true,
        caption: "Bus Schedule Data",
        gridview: true,
        autoencode: true
    });

inlineNavParams = {
    save: false, // we want to add Save button manually. So we needn't no standard button
    edit: true, add: true, del: true,
    editParams: { mtype: "PATCH" },
    addParams: {
        addRowParams: {
                            aftersavefunc: function (rowid, response) {
                var rowData = $.parseJSON(response.responseText),
                    newId = rowData.id,
                    $self = $(this),
                    idPrefix = $self.jqGrid("getGridParam", "idPrefix", newId),
                    selrow = $self.jqGrid("getGridParam", "selrow", newId),
                    selArrayRow = $self.jqGrid("getGridParam", "selarrrow", newId),
                    oldId = $.jgrid.stripPref(idPrefix, rowid),
                    dataIndex = $self.jqGrid("getGridParam", "_index", newId),
                    i;
                                    if (dataIndex != null && dataIndex[oldId] !== undefined) {
                    dataIndex[newId] = dataIndex[oldId];
                    delete dataIndex[oldId];
                }
                                    $("#" + $.jgrid.jqID(rowid)).attr("id", idPrefix + newId);
                                    if (selrow === rowid) {
                    $self.jqGrid("setGridParam", { selrow: idPrefix + newId });
                }
                                    if ($.isArray(selArrayRow)) {
                    i = $.inArray(rowid, selArrayRow);
                    if (i >= 0) {
                        selArrayRow[i] = idPrefix + newId;
                    }
                }
                                    $self.jqGrid("showAddEditButtons");
            }
        }
    }
};

    $grid.jqGrid("navGrid", "#pager1", { edit: false, add: false, del: false, search: false });
    $grid.jqGrid("inlineNav", "#pager1", inlineNavParams);

    $grid.jqGrid("navButtonAdd", "#pager1", {
        caption: $.jgrid.nav.savetext || "",
        title: $.jgrid.nav.savetitle || "Save row",
        buttonicon: "ui-icon-disk",
        id: $grid[0].id + "_ilsave",
        onClickButton: function () {
            var $self = $(this),
                gridIdSelector = $.jgrid.jqID(this.id),
                savedRow = $self.jqGrid("getGridParam", "savedRow"),
                prmNames = $self.jqGrid("getGridParam", "prmNames"),
                editUrl = $self.jqGrid("getGridParam", "editurl"),
                rowid = savedRow != null ? savedRow[0].id : "",
                id = $.jgrid.stripPref($self.jqGrid("getGridParam", "idPrefix"), rowid),
                tmpParams = {};

        if (rowid != null) {
            if ($("#" + $.jgrid.jqID(rowid), "#" + gridIdSelector).hasClass("jqgrid-new-row")) {
                if (!inlineNavParams.addParams.addRowParams.extraparam) {
                    inlineNavParams.addParams.addRowParams.extraparam = {};
                }
                inlineNavParams.addParams.addRowParams.extraparam[prmNames.oper] = prmNames.addoper;
                tmpParams = inlineNavParams.addParams.addRowParams;
            } else {
                if (!inlineNavParams.editParams.extraparam) {
                    inlineNavParams.editParams.extraparam = {};
                }
                inlineNavParams.editParams.extraparam[prmNames.oper] = prmNames.editoper;
                inlineNavParams.editParams.url = editUrl + "/" + id;
                tmpParams = inlineNavParams.editParams;
            }
            if ($self.jqGrid("saveRow", rowid, tmpParams)) {
                $self.jqGrid("showAddEditButtons");
            }
        } else {
            $.jgrid.viewModal("#alertmod", {gbox: "#gbox_" + gridIdSelector, jqm: true});
            $("#jqg_alrt").focus();
        }
    }
});


    $.extend(true, $.jgrid.inlineEdit, {
        keys: true,
        afterrestorefunc: function () {
            $(this).jqGrid("showAddEditButtons");
        },
        aftersavefunc: function () {
            $(this).jqGrid("showAddEditButtons");
        },
    });

Answer 1

jqGrid のインライン編集モードは、編集の実装に必要な次の 3 つの基本メソッドを提供します: editRow、restoreRow、およびsaveRow。メソッドaddRowは空の行を追加し、editRow編集を開始するために内部的に使用します。keys: true1 つのオプションを使用する場合、明示的editRowに呼び出す必要はありません。ユーザーが編集フィールドでキーを押した場合、内部的に実行します。ユーザーはキーを使用して編集をキャンセルできます。の代わりにケース内で内部的に呼び出します。saveRoweditRowEnterEsceditRowrestoreRowsaveRow

後で導入された jqGrid formatter: "actions"、addRow、およびinlineNavは、編集を開始してデータを保存するためのボタンが必要な場合に、インライン編集の使用を少し簡素化します。formatter: "actions"およびinlineNavの使用に関する問題のほとんどは、パラメーターの正しい使用法にあり、メソッドではパラメーターの使用法をあまり制御できないためです。さらにinlineNav、バージョン 4.4.5 でのみ修正された多くのバグがありました。

申し訳ありませんが、非常に長い一般的なテキストですが、最初に を使用せずに質問に答えたい理由を説明しinlineNav、次にメソッドを使用するソリューションを提供したいと思います。

既存の行を編集するためにインライン編集を使用する最も簡単な方法は次のとおりです。editRowのすぐ内側から始まりますondblClickRow。ユーザーは キーを押しEnterて編集行をサーバーに保存するか、 キーを押しEscて変更を破棄できます。対応するコードは次のようになります。

var azureHeaders = { "X-ZUMO-APPLICATION": "myApplicationKey" },
    myTableURL = "https://oleg.azure-mobile.net/tables/Products";

$("#grid").jqGrid({
    url: myTableURL,
    datatype: "json",
    prmNames: {search: null, nd: null, sort: null, rows: null},
    ajaxGridOptions: { contentType: "application/json", headers: azureHeaders },
    jsonReader: { repeatitems: false, root: function (obj) { return obj; } },
    ondblClickRow: function (rowid) {
        var $self = $(this);

        $self.jqGrid("editRow", rowid, {
            mtype: "PATCH",
            keys: true,
            url: myTableURL + "/" +
                $.jgrid.stripPref($self.jqGrid("getGridParam", "idPrefix"), rowid)
        });
    },
    ajaxRowOptions: { contentType: "application/json", headers: azureHeaders },
    serializeRowData: function (postData) {
        var dataToSend = $.extend(true, {}, postData);
        if (dataToSend.hasOwnProperty("oper")) {
            delete dataToSend.oper;
        }
        if (dataToSend.hasOwnProperty("id")) {
            delete dataToSend.id;
        }
        return JSON.stringify(dataToSend);
    },
    gridview: true,
    loadonce: true,
    autoencode: true,
    ... // other parameters of jqGrid
});

(コードを簡単にするために、データの読み込み中または編集結果の保存中のエラー処理を削除しました)

上記の例は機能します。ユーザーは、データの表示、行の選択、ローカル ページングの作成などを行うことができます。反対側では、ユーザーは行をダブルクリックして編集できます。デザインのインライン編集では、同じ側で複数の行を編集できることを理解することが重要です。ユーザーは、1 つの行をダブルクリックしていくつかの変更を行い、次に別の行をダブルクリックして他の変更を行うことができます。最後に、ユーザーは、EnterまたはEscキーを押して行の現在の変更を保存または破棄することにより、すべての行の編集を終了できます。

すべての行の編集の開始時に、グリッドの行に関連付けられるurlオプションを設定します。ユーザーがキーを押すと、同じパラメータでメソッドが内部的に呼び出されます。editRowEntereditRowsaveRow

インライン編集がどのように機能するかを理解したら、使用時にすべてがどのように機能するかを説明できますinlineNav。inlineNav(こちらを参照)のコードを調べると、ナビゲーター バーにカスタム ボタンを追加するメソッドnavButtonAddが主に使用されていることがわかります。onClickButtonコールバック内でaddRow、editRow、saveRowまたはを呼び出しますrestoreRow。バージョン 4.4.5 では多くのバグが修正されていますinlineNav(ここ、ここ、ここ、ここ、およびここを参照)。たとえば、同時に複数の行を編集することを許可する場合 (現在文書化されていないオプションを使用する場合restoreAfterSelect: false)inlineNav)$t.p.savedRow[0].id式を使用して行 ID を取得するため、jqGrid のコードは行の保存または破棄に間違った行 ID を使用する可能性があります。そのため、現在のバージョンの jqGrid ではオプションを使用しないでください。restoreAfterSelect: false

私の意見では、主な問題はinlineNav、行の編集の初期化中に保存または破棄するオプションが同じではないことです。の呼び出しに使用されたのと同じオプションを使用してor *not をinlineNav呼び出すことを意味します。たとえば、RESTfull with行が使用されるように のプロパティを変更した場合、ユーザーが [保存] ボタンをクリックすると、同じオプションでの呼び出しが行われません。saveRowrestoreRoweditRowurleditRowurlidsaveRow

さらに、ユーザーが をクリックした場合に現在のオプションを変更する (主に変更する) ために使用できるコールバックurlは存在しませんsaveRow。現在 ( jqGrid 4.4.5 以下) には、そのようなコールバックはありinlineNavません。saveRow

私が見る問題を解決する唯一の方法は次のとおりです。

1. restoreAfterSelect: falseオプションは絶対に使わない
2. inlineNavsave: falseのオプションを使用
3. の対応するボタンのように見えるカスタムの「保存」ボタンを追加し、呼び出す前に手動でオプションをinlineNav変更します。つまり、 の「保存」ボタンを再実装する必要があります。urlsaveRowinlineNav

対応する実装の例を以下に示します。loadonce: trueオプションを使用しました。大きなテーブルがあり、サーバー側のページングを好む場合は、質問に対する以前の回答に対応するいくつかのパラメーターを変更する必要があります。さらに、コードを少し簡略化するためにエラー処理を削除しました。

var $grid = $("#list"),
    azureHeaders = { "X-ZUMO-APPLICATION": "myApplicationKey" },
    myTableURL = "https://oleg.azure-mobile.net/tables/Products",
    inlineNavParams = {
        save: false, // we want to add Save button manually. So we needn't no standard button
        editParams: { mtype: "PATCH" },
        addParams: {
            addRowParams: {
                //mtype: "POST", // default value
                aftersavefunc: function (rowid, response) {
                    var rowData = $.parseJSON(response.responseText),
                        newId = rowData.id,
                        $self = $(this),
                        p = $self.jqGrid("getGridParam"), // get all parameters as object
                        idPrefix = p.idPrefix,
                        oldId = $.jgrid.stripPref(idPrefix, rowid),
                        selrow = p.selrow,
                        selArrayRow = p.selarrrow,
                        dataIndex = p._index,
                        keyIndex = p.keyIndex,
                        colModel = p.colModel,
                        localRowData = $self.jqGrid("getLocalRow", rowid),
                        i;
                    // update id in the _index
                    if (dataIndex != null && dataIndex[oldId] !== undefined) {
                        dataIndex[newId] = dataIndex[oldId];
                        delete dataIndex[oldId];
                    }
                    // update id value in the data
                    if (localRowData.hasOwnProperty("_id_")) {
                        localRowData._id_ = newId;
                    }
                    if (keyIndex !== false) {
                        for (i = 0; i < colModel.length; i++) {
                            if (colModel[i].key) {
                                if (localRowData.hasOwnProperty(colModel[i].name)) {
                                    // update the value of the column
                                    localRowData[colModel[i].name] = idPrefix + newId;
                                    $self.jqGrid("setCell", rowid, i, newId);
                                }
                                break; // one can have only one column with key:true
                            }
                        }
                    }

                    // update id attribute in <tr>
                    $("#" + $.jgrid.jqID(rowid)).attr("id", idPrefix + newId);
                    // update id of selected row
                    if (selrow === rowid) {
                        $self.jqGrid("setGridParam", { selrow: idPrefix + newId });
                    }

                    // update id in selarrrow array
                    // in case of usage multiselect:true option
                    if ($.isArray(selArrayRow)) {
                        i = $.inArray(rowid, selArrayRow);
                        if (i >= 0) {
                            selArrayRow[i] = idPrefix + newId;
                        }
                    }
                    // the next line is required if we use ajaxRowOptions: { async: true }
                    $self.jqGrid("showAddEditButtons");

                }
            }
        }
    };

// set common options which we want to use in inline editing
$.extend(true, $.jgrid.inlineEdit, {
    keys: true,
    afterrestorefunc: function () {
        $(this).jqGrid("showAddEditButtons");
    },
    aftersavefunc: function () {
        $(this).jqGrid("showAddEditButtons");
    },
});

$grid.jqGrid({
    colModel: [
        { name: "id", key: true, width: 100 }, // optional column
        { name: "Name", width: 450, editable: true }
    ],
    // the parameters below are needed to load the grid data from the server
    // we use loadonce: true option below. One can use server side pading instead.
    // see https://stackoverflow.com/a/15979809/315935 for the changes
    url: myTableURL,
    datatype: "json",
    prmNames: {search: null, nd: null, sort: null, rows: null},
    ajaxGridOptions: { contentType: "application/json", headers: azureHeaders },
    jsonReader: {
        repeatitems: false,
        root: function (obj) { return obj; }
    },
    gridview: true,
    autoencode: true,
    loadonce: true,
    // we implement additionally inline editing on double-click.
    // it's optional step in case of usage inlineNav
    ondblClickRow: function (rowid) {
        var $self = $(this);

        $self.jqGrid("editRow", rowid, {
            mtype: "PATCH",
            keys: true,
            url: myTableURL + "/" +
                $.jgrid.stripPref($self.jqGrid("getGridParam", "idPrefix"), rowid)
        });
    },
    // next options are important for inline editing
    ajaxRowOptions: { contentType: "application/json", headers: azureHeaders },
    editurl: myTableURL,
    serializeRowData: function (postData) {
        var dataToSend = $.extend(true, {}, postData); // make copy of post data
        if (dataToSend.hasOwnProperty("oper")) {
            delete dataToSend.oper;
        }
        if (dataToSend.hasOwnProperty("id")) {
            delete dataToSend.id;
        }
        return JSON.stringify(dataToSend);
    },
    rowNum: 2,
    rowList: [2, 5, 10],
    sortname: "Name",
    sortorder: "desc",
    viewrecords: true,
    rownumbers: true,
    height: "auto",
    pager: "#pager"
    caption: "Windows Azure Mobile Services REST API"
}).jqGrid("navGrid", "#pager", { edit: false, add: false, del: false, search: false });
$grid.jqGrid("inlineNav", "#pager", inlineNavParams);
$grid.jqGrid("navButtonAdd", "#pager", {
    caption: $.jgrid.nav.savetext || "",
    title: $.jgrid.nav.savetitle || "Save row",
    buttonicon: "ui-icon-disk",
    id: $grid[0].id + "_ilsave",
    onClickButton: function () {
        var $self = $(this),
            gridIdSelector = $.jgrid.jqID(this.id),
            savedRow = $self.jqGrid("getGridParam", "savedRow"),
            prmNames = $self.jqGrid("getGridParam", "prmNames"),
            editUrl = $self.jqGrid("getGridParam", "editurl"),
            rowid = savedRow != null ? savedRow[0].id : "",
            id = $.jgrid.stripPref($self.jqGrid("getGridParam", "idPrefix"), rowid),
            tmpParams = {};

        if (rowid != null) {
            if ($("#" + $.jgrid.jqID(rowid), "#" + gridIdSelector).hasClass("jqgrid-new-row")) {
                if (!inlineNavParams.addParams.addRowParams.extraparam) {
                    inlineNavParams.addParams.addRowParams.extraparam = {};
                }
                inlineNavParams.addParams.addRowParams.extraparam[prmNames.oper] = prmNames.addoper;
                tmpParams = inlineNavParams.addParams.addRowParams;
            } else {
                if (!inlineNavParams.editParams.extraparam) {
                    inlineNavParams.editParams.extraparam = {};
                }
                inlineNavParams.editParams.extraparam[prmNames.oper] = prmNames.editoper;
                inlineNavParams.editParams.url = editUrl + "/" + id;
                tmpParams = inlineNavParams.editParams;
            }
            if ($self.jqGrid("saveRow", rowid, tmpParams)) {
                $self.jqGrid("showAddEditButtons");
            }
        } else {
            $.jgrid.viewModal("#alertmod", {gbox: "#gbox_" + gridIdSelector, jqm: true});
            $("#jqg_alrt").focus();
        }
    }
});
$("#" + $grid[0].id + "_ilsave").addClass("ui-state-disabled");

最も複雑なのは、パラメータのaftersavefuncコールバックの実装です。addRowParamsインライン編集のコードを拡張するtrirandへの提案を後で投稿する予定ですが、aftersavefuncコールバックのコードを単純化して、

aftersavefunc: function (rowid, response) {
    return response.responseText ?
        $.parseJSON(response.responseText).id :
        undefined;
}

aftersavefuncによって返される値のタイプが「未定義」でない場合、他のすべてのことは jqGrid が内部的に行う必要があります。