的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回拨。