进行内联编辑时如何进行 Ajax 调用

Question

我正在使用免费的 jqgrid 来编辑描述列表。这可以按我的意愿工作，但我找不到如何通过对服务器的 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"); } 在代码中，目的是在编辑行后捕获“输入”事件。我不知道这是否在 jqGrid 的免费版本中，因为它不起作用。或者更可能是错误的。

Answer 1

jqGrid 已经内置了关于 Ajax 请求将数据保存在服务器上的可能性。您只需将editurl 选项添加到网格。您不需要使用 id 创建隐藏列。取而代之的是，您可以通知 jqGrid 保存信息的属性名称。您可以从 colModel 中删除 FaultCategoryDetailId 列并添加以下选项：

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

以https://jsfiddle.net/OlegKi/neg0e0o2/ 为例。您可以在开发者工具中看到，按下 Enter jqGrid POST 到 editurl 类似的数据

Description=Modified text
oper=edit
FaultCategoryDetailId=20