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（＆＃34; editsave＆＃34;）;在代码中意图捕获＆＃34;输入＆＃34;编辑行后的事件。我不知道这是否在jqGrid的免费版本中，因为它不起作用。或者更可能是错误。

Answer 1

jqGrid包含已经内置的可能性，可以在Ajax请求方面保存服务器上的数据。您只需向网格添加editurl选项即可。您不需要使用id创建隐藏列。而不是你可以通知jqGrid关于保存信息的属性名称。您可以从FaultCategoryDetailId中删除colModel列，然后添加以下选项：

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

以https://jsfiddle.net/OlegKi/neg0e0o2/为例。您可以在开发者工具中看到，按输入 jqGrid POST到editurl数据，如

Description=Modified text
oper=edit
FaultCategoryDetailId=20

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

1 个答案: