2017-09-26 217 views
0

我正在使用免費的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中,因爲它不起作用。無論如何它更可能是錯誤的。

+1

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

+0

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

+0

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

回答

1

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 
+0

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

+1

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

+0

輝煌,非常感謝! – arame3333

相關問題