如何在進行內聯編輯時進行Ajax調用

我正在使用免費的jqgrid來編輯說明列表。這符合我的要求，但我無法找到如何通過Ajax調用持久化這些更改到服務器。如何在進行內聯編輯時進行Ajax調用

<div id="divLoading" class="has-error">Loading ...</div> 
<table id="grid"></table> 
<div id="pager"></div>

$(function() { 
    var data = GetHiddenField("sir-standard-faults-for-category"); 
    populateGrid(data.FaultCategoryDetails); 
}); 

var populateGrid = function (data) { 
    var grid = $("#grid"); 
    var lastSel = 0; 
    grid.jqGrid({ 
     data: data, 
     colNames: ["FaultCategoryDetailId", "Fault"], 
     colModel: [ 
      { name: "FaultCategoryDetailId", index: "FaultCategoryDetailId", width: 65, align: "center", hidden: true, key: true }, 
      { name: "Description", label: "Description", width: 500, align: "center", editable: true } 
     ], 
     cmTemplate: { autoResizable: true, align: "center" }, 
     rowNum: 20, 
     pager: "#pager", 
     shrinkToFit: true, 
     rownumbers: true, 
     sortname: "Description", 
     viewrecords: true, 
     onSelectRow: function (FaultCategoryDetailId) { 
      if (FaultCategoryDetailId && FaultCategoryDetailId !== lastSel) { 
       jQuery("#grid").restoreRow(lastSel); 
       lastSel = FaultCategoryDetailId; 
      } 
      jQuery("#grid").editRow(FaultCategoryDetailId, true); 
     }, 
     oneditfunc: function() { alert("put ajax call here?"); } 
    }); 

    grid.jqGrid("filterToolbar", { 
     beforeSearch: function() { 
      return false; // allow filtering 
     } 
    }).jqGrid("gridResize"); 
    $("#divLoading").hide(); 
}

編輯2：這是最後一次編輯的修正，雖然這一次沒工作，要麼;我把oneditfunc：function（）{alert（「editsave」）; }代碼中，意圖在編輯行之後捕獲「enter」事件。我不知道這是否在免費版本的jqGrid中，因爲它不起作用。無論如何它更可能是錯誤的。

來源

2017-09-26 arame3333

很抱歉，但我不明白你的問題。 1）在頁面上顯示「#divLoading」。你爲什麼需要它？至少它最初應該有'style =「display：none;」'。 2）您的代碼不包含任何Ajax請求。你想堅持什麼？ 3）僅在本地**編輯數據**。您是否想要將修改後的行保存到服務器，或者您計劃稍後獲取修改後的網格數據並將新數據發送回服務器？ – Oleg

1 /「#divLoading」用於顯示「加載」，直到呈現網格中的數據。這個問題並不相關。 2 /我不知道在哪裏放Ajax請求，這就是爲什麼它不在那裏，3 /是的，除了在本地保存數據之外，我還想對服務器進行AJAX調用，以便同時保存更改數據在本地保存。我希望這個澄清？ – arame3333

我想編輯並保存說明字段，這意味着我還需要發送AJAX調用中的FaultCategoryDetailId。 – arame3333

jqGrid包含已經內置的可能性，以便根據Ajax請求將數據保存在服務器上。您只需在網格中添加editurl選項。您不需要使用該ID創建隱藏列。除此之外，您可以通知jqGrid有關包含信息的財產的名稱。您可以從colModel刪除FaultCategoryDetailId列，並添加以下選項，而不是：

prmNames: { id: "FaultCategoryDetailId" }, 
localReader: { id: "FaultCategoryDetailId" },

見https://jsfiddle.net/OlegKi/neg0e0o2/作爲一個例子。您可以在開發者工具看到的，在按輸入的jqGrid POST到editurl的數據，如

Description=Modified text 
oper=edit 
FaultCategoryDetailId=20

來源

2017-09-27 07:53:00 Oleg

非常好，我真的很喜歡不必在我的網格中放置一個隱藏的列。我確信這是答案，但我希望能夠編輯editUrl，因爲我想調用一個webapi（道歉，如果你不能回答這個問題），它將url的結尾部分定義爲[HttpPost（「{ faultCategoryDetailId}/{description}/updatestandardfault「）] 因此設置參數可能不會像上面那樣格式化它們。 – arame3333

@ arame3333：您可以使用其他選項擴展'inlineEditing'，這些選項定義了HTTP方法並動態設置了URL。例如，看[答案]（https://stackoverflow.com/a/34721322/315935）。您需要發送哪些信息以及確切的格式？ – Oleg

輝煌，非常感謝！ – arame3333

如何在進行內聯編輯時進行Ajax調用

回答

相關問題