如何在进行内联编辑时进行 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"); } 在代码中，目的是在编辑行后捕获 "enter" 事件。我不知道这是否在 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

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

How to make an Ajax call when doing an inline edit

jquery

ajax

jqgrid

free-jqgrid