的jqGrid的在線編輯與REST API（POST，PUT，DELETE HTTP請求）

Question

jqGrid的版本： Guriddo jqGrid的JS - V5.0.2

什麼是我的目標是什麼？ 我想創建一個內聯jqGrid。這裏使用POST請求完成添加，使用PUT請求完成編輯，使用DELETE請求完成刪除。

到目前爲止我做了什麼？ 我可以使用RESTful webService（通過http PUT和DELETE請求）進行內聯編輯和刪除。

這裏是代碼 -

var lastSel, 
cancelEditing = function(myGrid) { 
    var lrid; 
    if (typeof lastSel !== "undefined") { 
     myGrid.jqGrid('restoreRow', lastSel); 
     lrid = $.jgrid.jqID(lastSel); 
     $("tr#" + lrid + " div.ui-inline-edit, " + "tr#" + lrid + " div.ui-inline-del").show(); 
     $("tr#" + lrid + " div.ui-inline-save, " + "tr#" + lrid + " div.ui-inline-cancel").hide(); 
    } 
}; 
$.extend($.jgrid.defaults, { 
ajaxRowOptions: { 
    contentType: "application/json", 
    async: true,type:"PUT", 
    beforeSend: function(jqXHR, settings) { 
     jqXHR.setRequestHeader("Authorization", 'Basic ZHByZWdpc3RyYXI6MTIzNDU='); 
     jqXHR.setRequestHeader("If-Match", '*'); 
    }, 
    complete: function(res, stat) { 
     if (res.status == 200 || res.status == 204) { 
      $("#jqGrid").trigger("reloadGrid"); 
     } else { 
      return [false, res.responseText]; 
     } 
    } 
}, 
serializeRowData: function(data) { 
    var propertyName, propertyValue, dataToSend = {}; 
    for (propertyName in data) { 
     if (data.hasOwnProperty(propertyName)) { 
      propertyValue = data[propertyName]; 
      if ($.isFunction(propertyValue)) { 
       dataToSend[propertyName] = propertyValue(); 
      } else { 
       dataToSend[propertyName] = propertyValue; 
      } 
     } 
    } 
    return JSON.stringify(dataToSend); 
} 
}); 

var thisGrid = $("#jqGrid").jqGrid({ 
datatype: "json", 
url: 'https://localhost/MyWebService/academic/classroom/all', 
editurl: 'https://localhost/MyWebService/academic/classroom', 
loadBeforeSend: function(jqXHR) { 
    jqXHR.setRequestHeader("Authorization", 'Basic ZHByZWdpc3RyYXI6MTIzNDU='); 
}, 
jsonReader: { 
    repeatitems: false 
}, 
colModel: [{ 
     label: 'Room Id', 
     name: 'id', 
     width: 10, 
     hidden: true, 
     key: true 
    }, { 
     label: 'Room Number', 
     name: 'roomNo', 
     editable: true, 
     width: 100 
    }, { 
     label: "Edit Actions", 
     name: "actions", 
     width: 100, 
     formatter: "actions", 
     formatoptions: { 
      keys: true, 
      editOptions: {}, 
      addOptions: { 
       mtype: 'POST' 
      }, 
      delOptions: { 
       mtype: 'DELETE', 
       onclickSubmit: function(rp_ge) { 
        var selrow_id = thisGrid.getGridParam('selrow'); 
        var rowdata = thisGrid.getRowData(selrow_id); 
        rp_ge.url = "https://localhost/MyWebService/academic/classroom" + '/' + selrow_id; 
       }, 
       ajaxDelOptions: { 
        contentType: "application/json", 
        beforeSend: function(jqXHR) { 
         jqXHR.setRequestHeader("Authorization", 'Basic ZHByZWdpc3RyYXI6MTIzNDU='); 
        } 
       }, 
       serializeDelData: function(postdata) { 
        return JSON.stringify(postdata); 
       } 
      }, 
      onEdit: function(id) { 
       if (typeof(lastSel) !== "undefined" && id !== lastSel) { 
        cancelEditing(thisGrid); 
       } 
       lastSel = id; 
       $("#jqGrid").setGridParam({ 
        editurl: "https://localhost/MyWebService/academic/classroom/" + encodeURIComponent(id) 
       }); 
      } 

     } 
    } 
], 
sortname: 'id', 
loadonce: true, 
autowidth: true, 
pager: "#jqGridPager", 
rownumbers: true, 
height: 500, 

rowList: [], // disable page size dropdown 
pgbuttons: false, // disable page control like next, back button 
pgtext: null, 

ondblClickRow: function(id, ri, ci, e) { 
    if (typeof(lastSel) !== "undefined" && id !== lastSel) { 
     cancelEditing($(this)); 
    } 
    lastSel = id; 
    var lrid = $.jgrid.jqID(lastSel); 
    if (!e) e = window.event; // get browser independent object 
    var element = e.target || e.srcElement; 


    $("#jqGrid").jqGrid('editRow', id, true, function() { 
     var colModel = jQuery("#jqGrid").jqGrid('getGridParam', 'colModel'); 
     var colName = colModel[ci].name; 
     var input = $('#' + id + '_' + colName); 
     console.log(input) 
     setTimeout(function() { 
      input.get(0).focus(); 
     }, 300); 
    }, null, "https://localhost/MyWebService/academic/classroom/" + encodeURIComponent(id)); 
    $("tr#" + lrid + " div.ui-inline-edit, " + "tr#" + lrid + " div.ui-inline-del").hide(); 
    $("tr#" + lrid + " div.ui-inline-save, " + "tr#" + lrid + " div.ui-inline-cancel").show(); 
} 
}); 
var addOptions = { 
keys: true, 
type: "POST", 
url: "https://localhost/MyWebService/academic/classroom/", 
successfunc: function() { 
    var $self = $(this); 
    setTimeout(function() { 
     $self.trigger("reloadGrid"); 
    }, 50); 
    } 
}; 
$("#jqGrid").jqGrid("inlineNav", "#jqGridPager", { 
addParams: { 
    position: "last", 
    addRowParams: addOptions 
    } 
}); 

問題：當我試圖挽救一個新創建的記錄我PUT無法發佈的HTTP請求類型。我知道它的原因。下面的代碼負責人認爲 -

$.extend($.jgrid.defaults, { 
    ajaxRowOptions: { contentType: "application/json", async: true,type:"PUT", 

我不能重寫此類型：「PUT」設置鍵入：「POST」創建一個新的行中。

還有一些其他的美容觀察。我已在附加的圖像文件中提供了該評論。

編輯1 這是我更新的代碼：

$.jgrid.defaults.responsive = true; 
    $.jgrid.defaults.styleUI = 'Bootstrap'; 
    $.extend($.jgrid.inlineEdit, { restoreAfterError: false }); 

    var lastSel, 
    cancelEditing = function(myGrid) { 
    var lrid; 
    if (typeof lastSel !== "undefined") { 
     myGrid.jqGrid('restoreRow',lastSel); 
     lrid = $.jgrid.jqID(lastSel); 
     $("tr#" + lrid + " div.ui-inline-edit, " + "tr#" + lrid + " div.ui-inline-del").show(); 
     $("tr#" + lrid + " div.ui-inline-save, " + "tr#" + lrid + " div.ui-inline-cancel").hide(); 
    } 
    }; 
    $.extend($.jgrid.defaults, { 
    ajaxRowOptions: { contentType: "application/json", async: true, 
     beforeSend: function (jqXHR, settings) { 
     jqXHR.setRequestHeader("Authorization", 'Basic ZHByZWdpc3RyYXI6MTIzNDU='); 
     jqXHR.setRequestHeader("If-Match", '*'); 
     }, 
     complete: function(res, stat) { 
     if (res.status==200 || res.status==204) { 
      $("#jqGrid").trigger("reloadGrid"); 
     } else { 
      return [false, res.responseText ]; 
     } 
     } 
    }, 
    serializeRowData: function (data) { 
     var propertyName, propertyValue, dataToSend = {}; 
     for (propertyName in data) { 
     if (data.hasOwnProperty(propertyName)) { 
      propertyValue = data[propertyName]; 
      if ($.isFunction(propertyValue)) { 
      dataToSend[propertyName] = propertyValue(); 
      } else { 
      dataToSend[propertyName] = propertyValue; 
      } 
     } 
     } 
     return JSON.stringify(dataToSend); 
    } 
    }); 

    var thisGrid =$("#jqGrid").jqGrid({ 
    datatype: "json", 
    url: 'https://localhost/ums-webservice-common/academic/classroom/all', 
    editurl:'https://localhost/ums-webservice-common/academic/classroom', 
    loadBeforeSend: function(jqXHR) { 
     jqXHR.setRequestHeader("Authorization", 'Basic ZHByZWdpc3RyYXI6MTIzNDU='); 
    }, 
    jsonReader: { repeatitems: false }, 
    colModel: [ 
     { 
     label: 'Room Id', 
     name: 'id', 
     width: 10, 
     hidden:true, 
     key: true 
     }, 
     { 
     label: 'Room Number', 
     name: 'roomNo', 
     editable: true, 
     width: 100 
     }, 
     { 
     label: 'Description', 
     name: 'description', 
     editable: true, 
     width: 200 
     }, 
     { 
     label : 'Row', 
     name: 'totalRow', 
     width: 50, 
     editable: true 
     }, 
     { 
     label: 'Column', 
     name: 'totalColumn', 
     width: 50, 
     editable: true 
     }, 
     { 
     label: 'Capacity', 
     name: 'capacity', 
     width: 50, 
     editable: true 
     }, 
     { 
     label: 'Room Type', 
     name: 'roomType', 
     editable: true, 
     width: 100, align: 'center', formatter: 'select', 
     edittype: 'select', 
     editoptions: { 
      value: '1:Theory;2:Sessional;0:Others', 
      defaultValue: 'Theory' 
     }, 
     stype: 'select', 
     searchoptions: { 
      sopt: ['eq', 'ne'], 
      value: '1:Theory;2:Sessional;0:Others' 
     }}, 


     { 
     label: 'Dept./School', 
     name: 'capacity', 
     width: 100, 
     editable: true 
     }, 
     { 
     label: 'Seat Plan', 
     name: 'examSeatPlan', 
     editable: true, 
     width: 80, align: 'center', formatter: 'checkbox', 
     edittype: 'checkbox', editoptions: {value: '1:0', defaultValue: '1'}, 
     stype: 'select', 
     searchoptions: { 
      sopt: ['eq', 'ne'], 
      value: '1:Yes;0:No' 
     } 


     }, 
     { 
     label: "Edit Actions", 
     name: "actions", 
     width: 100, 
     formatter: "actions", 
     formatoptions: { 
      keys: true, 
      editOptions: { 
      mtype: 'PUT' 
      }, 
      addOptions: { 
      mtype: 'POST' 
      }, 
      delOptions: { 
      mtype: 'DELETE', 
      onclickSubmit: function(rp_ge) { 
       var selrow_id = thisGrid.getGridParam('selrow'); 
       var rowdata = thisGrid.getRowData(selrow_id); 
       rp_ge.url = "https://localhost/ums-webservice-common/academic/classroom" + '/' + selrow_id ; 
      }, 
      ajaxDelOptions: { 
       contentType: "application/json", 
       beforeSend: function(jqXHR) { 
       jqXHR.setRequestHeader("Authorization", 'Basic ZHByZWdpc3RyYXI6MTIzNDU='); 
       } 
      }, 
      serializeDelData: function(postdata) { 
       return JSON.stringify(postdata); 
      } 
      }, 
      onEdit: function (id) { 
      if (typeof (lastSel) !== "undefined" && id !== lastSel) { 
       cancelEditing(thisGrid); 
      } 
      lastSel = id; 
      $("#jqGrid").setGridParam({ editurl: "https://localhost/ums-webservice-common/academic/classroom/" + encodeURIComponent(id)}); 
      } 

     } 
     } 
    ], 
    sortname: 'id', 
    loadonce: true, 
    autowidth: true, 
    pager: "#jqGridPager", 
    rownumbers: true, 
    height:500, 

    rowList: [],  // disable page size dropdown 
    pgbuttons: false,  // disable page control like next, back button 
    pgtext: null, 

    ondblClickRow: function(id, ri, ci,e) { 
     if (typeof (lastSel) !== "undefined" && id !== lastSel) { 
     cancelEditing($(this)); 
     } 
     lastSel = id; 
     var lrid = $.jgrid.jqID(lastSel); 
     if (!e) e = window.event; // get browser independent object 
     var element = e.target || e.srcElement; 


     $("#jqGrid").jqGrid('editRow',id,true,function() { 
     var colModel = jQuery("#jqGrid").jqGrid ('getGridParam', 'colModel'); 
     var colName = colModel[ci].name; 
     var input = $('#' + id + '_' + colName); 
     console.log(input) 
     setTimeout(function(){ input.get(0).focus(); }, 300); 
     },null,"https://localhost/ums-webservice-common/academic/classroom/"+ encodeURIComponent(id)); 
     $("tr#" + lrid + " div.ui-inline-edit, " + "tr#" + lrid + " div.ui-inline-del").hide(); 
     $("tr#" + lrid + " div.ui-inline-save, " + "tr#" + lrid + " div.ui-inline-cancel").show(); 
    } 


    }); 


    var addOptions = { 
    keys: true, 
    mtype: "POST", 
    url: "AddUser", 
    successfunc: function() { 
     var $self = $(this); 
     setTimeout(function() { 
     $self.trigger("reloadGrid"); 
     }, 50); 
    } 
    }; 
    $("#jqGrid").jqGrid("inlineNav", "#jqGridPager", { 
    addParams: { 
     position: "last", 
     addRowParams: addOptions 
    } 
    }); 

} 

Answer 1

哪個版本的jqGrid，並使其從jqGrid的（free jqGrid，Guriddo jqGrid JS或舊的jqGrid的岔路口<版= 4.7 ） 你用？我開發了免費的jqGrid分叉，並實現了一些簡化您的需求的新功能，並允許簡化代碼。

我建議你看看the answer。它展示瞭如何在免費的jqGrid中使用url和mtype作爲函數來簡化和清晰地讀取使用RESTful服務的代碼。

或者，您可以保存您當前的代碼和您使用的當前jqGrid版本，只需從ajaxRowOptions中刪除type財產。而不是你可以使用mtype參數"PUT"值僅適用於編輯選項，並使用mtype: "POST"添加選項。