Question

jqGrid中是否有一个事件在添加新行后执行操作？

我在jqGrid wiki中看到有事件afterInsertRow，但显然只要jqGrid在显示表时“向表”插入行，就会触发它。

那么在用户“插入”（保存）新行后我想做什么时应该使用什么？或者，是否有任何变量可以让我“知道”添加了新行？

Answer 1

主要问题是能够选择你需要的行知道新行的id。在大多数情况下，id将由数据库生成，您将数据保存在服务器上。因此，对服务器代码的第一个要求是在“添加”操作上返回服务器响应中新行的id。

例如，您的服务器代码将“行”的ID作为“添加”操作的响应返回。

$("#list").jqGrid('navGrid', '#pager', {/*navGrid options*/}, {/*Edit optoins*/}, {
    /*Add options:*/
    reloadAfterSubmit: false,
    afterSubmit: function (response) {
        return [true, '', response.responseText];
    },
    addedrow: "last", // add new row at the end of grid
    afterComplete: function (response, postdata) {
        // this.gbox is the string like "#gbox_list"
        var gridId = this.gbox.substr(6);
        //if (postdata.oper === "add") {
        //    // highlight the new "added" row
        //    var row = $("#" + $.jgrid.jqID(postdata.id));
        //    row.effect("highlight", {}, 3000);
        //}
        $('#' + gridId).jqGrid('setSelection', postdata.id);
    }
});

在afterComplete的评论部分中，我展示了如何使用jQuery UI highlight效果突出显示新添加的行（请参阅the old answer）。它可以替代行的选择。您还可以同时使用选择和突出显示效果。

选项reloadAfterSubmit: false至少有两个缺点。

如果使用在网格中使用排序数据（jqGrid的sortname参数不为空），则在添加新行后，网格的行将未正确排序第一个或作为网格中的最后一行。
如果网格每页已经有最大行数（由rowNum参数定义），则新行的添加将跟随网格，每页有太多行。

所以你可以做以下

var idToSelect;

$("#list").jqGrid({
    // ... all jqGrid options
    loadComplete: function () {
        if (idToSelect) {
            $(this).jqGrid('setSelection', idToSelect);
            //$("#" + $.jgrid.jqID(idToSelect)).effect("highlight", {}, 3000);
            idToSelect = undefined;
        }
    }
}).jqGrid('navGrid', '#pager', {/*navGrid options*/}, {/*Edit optoins*/}, {
    /*Add options:*/
    afterSubmit: function (response) {
        // save the id of new row. If the format of the data returned from
        // the server is different you should change the next row
        // corresponds to the returned data. For example if the server returns
        // back JSON data in the form {"myId":"123"} you should use
        // $.parseJSON(response.responseText).myId
        // instead of response.responseText below
        idToSelect = response.responseText;
        return [true, '', response.responseText];
    }
});

如果在重新加载网格后选择了新添加的行。

如何在添加新行后在jqGrid中执行操作

1 个答案: