如何在添加新行後在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]; 
    } 
}); 

在新添加的行會電網的重載後選擇的情況。