如何在进行内联编辑时进行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调用

回答

相关问题