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

Question

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

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

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

Answer 1

主要的问题是，要能够选择你需要知道新行的id的行。在大多数情况下，id将由您将数据保存在服务器上的数据库生成。因此，对服务器代码的第一个要求是在“add”操作的服务器响应中的新行上返回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至少有两个缺点。

1. 如果使用使用网格排序的数据（jqGrid的的sortname参数不为空）网格的行会不正确排序后的新行会被添加作为第一个或最后一个行在网格中。
2. 如果网格每页已经有最大行数（由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]; 
    } 
}); 

在新添加的行会电网的重载后选择的情况。