內聯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描述瞭解決問題的另一種方法。