Question

这是我本周早些时候this question的后续行动。

我能够让表单编辑功能正常工作。现在我想更进一步，看看我是否可以进行内联编辑。我使用了添加3个按钮的示例中的代码; E S C. E）dit和C）ancel工作得很好。 S）ave行功能没有。是否可以使用相同的代码进行表单编辑以使用内联编辑？或者是一个还是另一个？

我似乎与原来的问题在同一条船上。我可以看到正在发送的数据，它不是JSON格式。它看起来像： Id = 823＆amp; Step_Number = 1＆amp; Step_Description = xxx。＆amp; oper = edit＆amp; id = 1 。我收到的错误是这样的：

服务器在处理请求时遇到错误。请参阅服务帮助页面以构建对服务的有效请求。异常消息是'传入消息具有意外的消息格式'Raw'。操作的预期消息格式是'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, ... ，这也不好，但可以正常工作。在创建网格之前，您应该以任何方式更改$.jgrid.defaults。通常，您将所有默认设置的设置放在一个单独的JavaScript文件中，该文件包含在使用jqGrid的所有页面上。

我在评论不使用addRowData 时建议您使代码工作缓慢。在已经创建的网格<{1>}之后，简单地替换循环中的addRowData将提高性能。在所有行上使用data: data.details和getDataIDs循环会使代码更慢。我建议您阅读the old answer，其中介绍了如何使用WCF服务提供的数据填充jqGrid。

您可以使用formatter:'actions'（请参阅this old answer或another one），而不是使用“E”，“S”，“C”按钮。 One more old answer描述了解决问题的另一种方法。

内联jqGrid编辑“请求错误”

1 个答案: