内联jqGrid编辑“请求错误”

Question

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

我能够使表单编辑功能正常工作。现在我想进一步看看是否可以使内联编辑工作。我使用了添加3个按钮的示例中的代码; E S C. E）dit和C）ancel工作非常棒。 S）大行功能没有。是否可以使用相同的代码来编辑表单以处理内联编辑？或者它是一个或另一个？

我似乎和我原来的问题在同一条船上。我可以看到正在发送的数据，它不是JSON格式。它看起来像：Id = 823 & Step_Number = 1 & Step_Description = xxx。 & oper =编辑& 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); 
    } 
}); 

，或者你可以用

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

设置一些默认的jqGrid你就不需要在您使用的每个网格设置相同设置的情况。

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

我建议你在评论不要使用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描述了解决问题的另一种方法。