内联 jqGrid 编辑“请求错误”

Question

这是我本周早些时候对this question 的跟进。

我能够让表单编辑功能正常工作。现在我想更进一步，看看我是否可以让内联编辑工作。我使用了添加 3 个按钮的示例代码； E S C. E)dit 和 C)ancel 效果很好。 S)ave 行函数没有。是否可以对表单编辑使用相同的代码来处理内联编辑？还是两者之一？

我似乎和我最初的问题一样。我可以看到正在发送的数据，它不是 JSON 格式。它看起来像：Id=823&Step_Number=1&Step_Description=xxx.&oper=edit&id=1。我收到的错误是这样的：

服务器在处理请求时遇到错误。请参阅服务帮助页面以构建对服务的有效请求。异常消息是“传入消息具有意外消息格式“原始”。该操作的预期消息格式为“Xml”、“Json”。这可能是因为尚未在绑定上配置 WebContentTypeMapper。有关详细信息，请参阅 WebContentTypeMapper 的文档。有关更多详细信息，请参阅服务器日志。异常堆栈跟踪是：

我查看了 ajaxRowOptions 但这似乎并没有改变任何东西。并不意味着我把它放在正确的位置。

[WebInvoke(Method = "POST", UriTemplate = "/Save/JSA", BodyStyle = WebMessageBodyStyle.Wrapped, RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json)]
public string UpdateJSADetail(int Id, string Step_Number, string Step_Description, string oper, string id)

...
onclickSubmitLocal = function (options, postdata) {                    
},
editSettings = {
    recreateForm: true,
    width: 400,
    jqModal: false,
    reloadAfterSubmit: false,
    closeOnEscape: true,
    savekey: [true, 13],
    closeAfterEdit: true,
    onclickSubmit: onclickSubmitLocal
},
addSettings = {
    recreateForm: true,
    jqModal: false,
    reloadAfterSubmit: false,
    savekey: [true, 13],
    closeOnEscape: true,
    closeAfterAdd: true,
    onclickSubmit: onclickSubmitLocal
};

$("#list").jqGrid({
    url: 'FileServices/GetList/JSA',
    edit: {
        mtype: "POST"
    },
    editurl: 'FileServices/Save/JSA',
    datatype: 'local',
    gridComplete: function () {
        var ids = jQuery("#list").jqGrid('getDataIDs');
        for (var i = 0; i < ids.length; i++) {
            var cl = ids[i]; 
            be = "<input style='height:22px;width:20px;' type='button' value='E' onclick=\"jQuery('#list').editRow('" + cl + "');\" />";
            se = "<input style='height:22px;width:20px;' type='button' value='S' onclick=\"jQuery('#list').saveRow('" + cl + "');\" />"; 
            ce = "<input style='height:22px;width:20px;' type='button' value='C' onclick=\"jQuery('#list').restoreRow('" + cl + "');\" />";
            jQuery("#list").jqGrid('setRowData', ids[i], { act: be + se + ce });
        }

        $("#list").jqGrid('setGridParam', {}).trigger("reloadGrid");
    },
    loadComplete: function (data) {
        var det = $("#details");
        $("#list").setGridWidth(det.width() - 18, true);
    },
    colNames: ['Actions', 'Id', 'Step Number', 'Step Description', 'Hazards', 'Controls', 'Sequence'],
    colModel: [
      { name: 'act', index: 'act', width: 75, sortable: false },
      { name: 'Id', editable: true, index: 'Id', width: 30, sortable: false, hidden: true },
      { name: 'Step_Number', editable: true, index: 'Step_Number', align: 'center', width: 50, fixed: true, resizable: false, sortable: false, title: false, cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="font-weight: bold: true; white-space: normal; vertical-align: middle;' } },
      { name: 'Step_Description', editable: true, index: 'Step_Description', edittype: 'textarea', editoptions: { rows: '4', cols: '40' }, sortable: false, width: 400, cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal; vertical-align: top;' } },
      { name: 'Hazards', index: 'Hazards', width: 200, sortable: false, formatter: JSAHazardFormatter, cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal; vertical-align: top;' } },
      { name: 'Controls', index: 'Controls', width: 200, sortable: false, cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal; vertical-align: top;' } },
      { name: 'Sequence', index: 'Sequence', width: 0, sortable: false, hidden: true }
    ],
    pager: '#pager',
    rowNum: 5,
    rowList: [5, 10, 15, 20, 25, 30, 50],
    sortname: 'Id',
    height: 'auto',
    rownumbers: true,
    autowidth: true,
    forceFit: true,
    shrinkToFit: true,
    sortorder: 'asc',
    viewrecords: true,
    gridview: true,
    hidegrid: false,
    caption: ''
}).navGrid("#pager", { add: false, edit: true, del: false, search: false }, editSettings, {}, {}, {}, {});

$.extend($.jgrid.edit, {
    ajaxEditOptions: { contentType: "application/json" },
    recreateForm: true,
    closeAfterEdit: true,
    closeOnEscape: true,
    serializeEditData: function (postData) {
        return JSON.stringify(postData);
    }
});

var thegrid = $("#list");

for (var i = 0; i < data.details.length; i++) {
    thegrid.addRowData(i + 1, data.details[i]);
}

非常感谢任何帮助。太感谢了。

Answer 1

您可以在服务器端共享相同的代码进行内联编辑和表单编辑。使用ajaxRowOptions 是解决问题的正确方法。它应该至少有contentType: "application/json"。尝试执行以下操作

$("#list").jqGrid({
    ... // you current parameters
    ajaxRowOptions: { contentType: "application/json" },
    serializeRowData: function (data) {
        return JSON.stringify(data);
    }
});

或者你可以设置一些 jqGrid 默认值

$.extend($.jgrid.defaults, {
    ajaxGridOptions: { contentType: "application/json" },
    ajaxRowOptions: { contentType: "application/json", type: "PUT", async: true },
    serializeRowData: function (data) {
        return JSON.stringify(data);
    }
});

如果您不需要在您使用的每个网格中设置相同的设置。

当然，您应该在创建网格之前更改默认值。目前您使用$.extend($.jgrid.edit, ... after 创建网格，这也不好，但可以工作。 $.jgrid.defaults 您应该在创建网格之前以任何方式更改。通常，您将所有默认设置的设置放在一个单独的 JavaScript 文件中，该文件包含在所有使用 jqGrid 的页面上。

我在评论中推荐你不要使用addRowData，这会让你的代码运行缓慢。在循环之后将addRowData 简单替换为附加参数data: data.details 将提高性能。在所有行上使用getDataIDs 和for 循环会使您的编码速度变慢。我建议您阅读the old answer，它描述了如何使用 WCF 服务提供的数据填充 jqGrid。

您可以使用formatter:'actions'（参见this old answer 或another one）来代替使​​用“E”、“S”、“C”按钮。 One more old answer 描述解决问题的另一种方法。