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

在添加新行后，jqGrid中是否有执行操作的事件

我看到有EventAfterInsertRow，但很明显，当jqGrid在显示表时将行“插入”到表中时，就会触发它

---

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

主要问题是，要能够选择行，您需要知道新行的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

的注释部分，我展示了如何使用effect突出显示新添加的行（请参阅）。它可以替代行的选择。您还可以同时使用选择和高亮显示效果

选项

reloadeaftersubmit:false

至少有两个缺点

如果在网格中使用排序数据（

sortname

jqGrid的参数不为空），则在新行添加为网格中的第一行或最后一行后，网格中的行将无法正确排序

如果网格的每页行数已达到最大值（由

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];
    }
});

---

在这种情况下，重新加载网格后将选择新添加的行。

您应该更准确地描述您使用的“插入”类型。例如，使用表单编辑。用户单击“添加”按钮，在用户单击“提交”按钮后，数据将成功保存在服务器上。您希望在从成功添加数据的服务器收到响应后执行一些操作（修改服务器响应）。您是否从服务器发回新行的

id

？是的，用户单击“添加”按钮，为新行填写数据，单击“提交”按钮，然后在表中创建新行。我不需要修改服务器响应。在这种特殊情况下，我只需要使用setSelection方法选择表中的第一行，但是如果添加了新行，我需要防止这种行为。这就是为什么我要查找该事件。我从服务器发送了行id。您仍然没有提供足够的信息。您是使用本地网格还是将数据保存在服务器上？您是否从服务器砂回新行id？如果从服务器返回新行的id，则可以使用属性。如果您有默认的

reloadeaftersubmit:true

网格将从服务器重新加载。无论如何，要选择新行，您应该知道所选行的id，但该id通常由服务器生成。您是在服务器上使用数据分页还是将所有数据放在一个页面上？谢谢您的全面回答。最后，我用第二种方法解决了这个问题。@cincplug:不客气！我想这个问题对其他人来说会很有趣，所以请回答我的问题。由于你的回答很好，我的谷歌搜索终于停止了。非常感谢。我喜欢它。@Ashish4434:不客气！我想知道我以前的答案仍然有用。