如何在进行内联编辑时进行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中,因为它不起作用。无论如何它更可能是错误的。
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
非常好,我真的很喜欢不必在我的网格中放置一个隐藏的列。我确信这是答案,但我希望能够编辑editUrl,因为我想调用一个webapi(道歉,如果你不能回答这个问题),它将url的结尾部分定义为[HttpPost(“{ faultCategoryDetailId}/{description}/updatestandardfault“)] 因此设置参数可能不会像上面那样格式化它们。 – arame3333
@ arame3333:您可以使用其他选项扩展'inlineEditing',这些选项定义了HTTP方法并动态设置了URL。例如,看[答案](https://*.com/a/34721322/315935)。您需要发送哪些信息以及确切的格式? – Oleg
辉煌,非常感谢! – arame3333
很抱歉,但我不明白你的问题。 1)在页面上显示“#divLoading”。你为什么需要它?至少它最初应该有'style =“display:none;”'。 2)您的代码不包含任何Ajax请求。你想坚持什么? 3)仅在本地**编辑数据**。您是否想要将修改后的行保存到服务器,或者您计划稍后获取修改后的网格数据并将新数据发送回服务器? – Oleg
1 /“#divLoading”用于显示“加载”,直到呈现网格中的数据。这个问题并不相关。 2 /我不知道在哪里放Ajax请求,这就是为什么它不在那里,3 /是的,除了在本地保存数据之外,我还想对服务器进行AJAX调用,以便同时保存更改数据在本地保存。我希望这个澄清? – arame3333
我想编辑并保存说明字段,这意味着我还需要发送AJAX调用中的FaultCategoryDetailId。 – arame3333