如何实现Azure移动服务表的内联编辑（编辑）。如何处理错误处理

Question

我正在使用jqGrid（inlineNav）来处理来自azure服务的数据，并且有兴趣了解内联编辑和使用azure移动服务表进行错误处理。

请分享想法。

代码更新1 ：代码更新基于Oleg使用ondblClickRow，输入和 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的内联编辑模式提供了实现编辑所需的三种基本方法：editRow，restoreRow和saveRow。方法addRow添加空行，然后使用内部editRow进行开始编辑。如果使用keys: true的{​​{1}}选项，则不需要明确调用editRow。如果用户在编辑字段中按 Enter 键，则saveRow在内部执行此操作。用户可以使用 Esc 键取消编辑。 editRow内部editRow调用restoreRow而不是saveRow。

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

（为了使代码更容易，我在删除数据或保存编辑结果时删除了任何错误处理）

以上示例有效。用户可以查看数据，选择行，进行本地分页等。另一方面，用户可以双击该行进行编辑。重要的是要理解设计内联编辑允许在同一侧编辑多行。用户可以双击一行，进行一些修改，然后双击另一行，进行一些其他修改。最后，用户可以通过按 Enter 或 Esc 键来完成每行的编辑，以保存或放弃当前行的更改。

在编辑每一行的开始，我们设置了url的{​​{1}}选项，该选项将与网格的行相关联。如果用户按 Enter 键，方法editRow会在内部调用editRow 并使用相同的参数。

在您了解内联编辑工作后，我可以解释在使用saveRow的情况下所有工作方式。如果您检查inlineNav的代码（请参阅here），那么您会看到它主要使用方法navButtonAdd，它将自定义按钮添加到导航栏。在inlineNav回调内部，它会调用onClickButton，addRow，editRow或saveRow。版本4.4.5修复了restoreRow中的许多错误（请参阅here，here，here，here和here），但它仍然存在不解决所有现有问题。例如，如果您允许同时编辑多个行（如果您使用inlineNav的当前未记录的选项restoreAfterSelect: false）那么因为使用inlineNav表达式来获取rowid jqGrid的代码可以使用错误的rowid 来保存或丢弃行。所以你不应该在当前版本的jqGrid中使用选项$t.p.savedRow[0].id 。

我认为restoreAfterSelect: false的主要问题是，在初始化行编辑过程中，使用不同的选项来保存或丢弃哪个选项。我的意思是inlineNav调用inlineNav或saveRow *没有使用与restoreRow调用相同的选项。如果更改了例如editRow的{​​{1}}属性，那么将使用带有url行的RESTfull editRow，则不会使用url调用id如果用户点击“保存”按钮，则选择相同的选项。

此外，如果用户点击saveRow，则存在无回调，可用于修改当前选项（主要用于修改url）。 Nether saveRow和inlineNav目前（在jqGrid 4.4.5或更低版本中）有这样的回调。

解决我看到的问题的唯一方法是：

1. 从不使用saveRow选项
2. 使用inlineNav
的restoreAfterSelect: false选项
3. 添加自定义“保存”按钮，该按钮看起来像save: false的相应按钮，并在一次调用inlineNav之前修改手动的url选项。换句话说，应该重新实现saveRow的“保存”按钮。

您可以在下面找到相应实施的示例。我使用了inlineNav选项。如果有一个大表并且更喜欢服务器端分页，则需要更改一些与您的问题my previous answer对应的参数。另外，我删除了错误处理以简化代码：

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回调的实现。我打算稍后将我的建议发布到trirand，它扩展了内联编辑的代码，但简化了addRowParams回调的代码，以便它可以只是

aftersavefunc

如果aftersavefunc: function (rowid, response) { return response.responseText ? $.parseJSON(response.responseText).id : undefined; } 返回的值的类型不是“未定义”，jqGrid应该在内部执行所有其他操作。