的jqGrid addRowData不火afterInsertRow

Question

我升級到4.14

從4.7.1我的jqGrid這是我對初始化腳本電網

jQuery("#detFlex62_1").jqGrid({ 
    url: root + mod + '/detaillistview', 
    datatype: "local", 
    colNames:[' ', '<?=lang("users_company_code")?>', '<?=lang("users_company_name")?>', ' ', ' '], 
    colModel:[ 
     {name:'myac', width:50, fixed:true, sortable:false, resize:false, formatter:'actions', formatoptions:{keys:true, editbutton : false, delbutton : false, delOptions: {reloadAfterSubmit:false},editOptions: {reloadAfterSubmit:false}}}, 
     {name:'company_code',index:'company_code', width:100}, 
     {name:'company_name',index:'company_name', width:100}, 
     {name:'company_id',index:'company_id', width:100,hidden:true}, 
     {name:'company_access_id',index:'company_access_id', width:100,hidden:true} 
     ], 
    width: $('.body').width()-40, 
    height: 120, 
    pager: '#pagerFlex62_1', 
    sortname: 'user_id', 
    sortorder: "desc", 
    editurl: root + mod + '/detailpost', 
    caption:"<?=lang("users_title")?>", 
    onSelectRow: function(id){ 
     activedf = "#detFlex62_1"; 
    }, 
    afterInsertRow: function (rowid) { 
     var grid = $(this), 
     iCol = getColumnIndexByName(grid,'myac'); // 'act' - name of the actions column 
     grid.find(">tbody>tr[id=" + rowid + "].jqgrow>td:nth-child(" + (iCol + 1) + ")") 
     .each(function() { 
      $("<div>", 
       { 
        title: "Edit", 
        mouseover: function() { 
         $(this).addClass('ui-state-hover'); 
        }, 
        mouseout: function() { 
         $(this).removeClass('ui-state-hover'); 
        }, 
        click: function(e) { 
         df_edit_1($(e.target).closest("tr.jqgrow").attr("id")); 
         /*alert("'Custom' button is clicked in the rowis="+ 
           $(e.target).closest("tr.jqgrow").attr("id") +" !");*/ 
        } 
       } 
      ).css({float:"left"}) 
       .addClass("ui-pg-div ui-inline-edit") 
       .append('<span class="ui-icon ui-icon-pencil"></span>') 
       .prependTo($(this).children("div")); 

      $("<div>", 
       { 
        title: "Delete", 
        mouseover: function() { 
         $(this).addClass('ui-state-hover'); 
        }, 
        mouseout: function() { 
         $(this).removeClass('ui-state-hover'); 
        }, 
        click: function(e) { 
         df_delete_1($(e.target).closest("tr.jqgrow").attr("id")); 
         /*alert("'Custom' button is clicked in the rowis="+ 
           $(e.target).closest("tr.jqgrow").attr("id") +" !");*/ 
        } 
       } 
      ).css({float:"left"}) 
       .addClass("ui-pg-div ui-inline-edit") 
       .append('<span class="ui-icon ui-icon-trash"></span>') 
       .prependTo($(this).children("div")); 

     }); 
    } 
}); 

jQuery("#detFlex62_1").jqGrid('navGrid','#pagerFlex62_1',{edit:false,del:false,search:false, addfunc: df_add_1, editfunc: df_edit_1}); 

而且這裏是我添加新行到grid

function df_addToJSON_1(form) 
{ 
    var idx = $('input[name=index]',form).val(); 
    var id = $('input[name=id]',form).val(); 

    var totalRows = jQuery("#detFlex62_1").jqGrid('getGridParam', 'records'); 
    var data = { 
     company_code: $('input[name=company_code]',form).val(), 
     company_name: $('input[name=company_name]',form).val(), 
     company_id: $('input[name=company_id]',form).val(), 
     company_access_id: $('input[name=company_access_id]',form).val() 
    }; 

    if (idx=='') 
    { 
     idx = getMaxRowId($('#detFlex62_1')); 
     $('#detFlex62_1').jqGrid("addRowData", idx + 1, data, "last"); 
    } 
    else 
    { 
     $('#detFlex62_1').jqGrid("setRowData", idx, data); 
    } 

    //pCheckShow(); 
    return false; 
} 

新行被添加，但沒有觸發afterInsertRow事件。這是爲什麼發生？我的代碼中有錯誤嗎？

Answer 1

免費jqGrid的支持afterAddRow，afterSetRow和afterDelRow回調，這將在addRowData，setRowData和delRowData方法結束時調用。由free jqGrid引入的最新的回調函數有一個參數（例如options），這些屬性包含附加信息。它只允許使用需要的屬性，而不需要插入不需要的第一個參數，如果只需要使用舊式回調的最後一個參數。此外，新的回調參數類型允許在未來的免費版jqGrid中輕鬆擴展選項。

因此，你可以，例如，改變afterInsertRow: function (rowid) {到afterAddRow: function (options) { var rowid = options.rowid;

一般來說，我會建議你做你的代碼更多的變化。你在afterInsertRow裏面做的是創建自定義動作按鈕。你的代碼很長很慢，因爲jqGrid 4.7沒有簡單的方法來創建自定義操作按鈕。免費的jqGrid確實支持這個功能。我建議您閱讀the wiki article，以檢查代碼the demo，this one和包含在the answer中的演示。您會看到創建操作按鈕非常簡單。您將完全控制onClick回撥。