JqGrid调用addRowData报错‘v.p.data.push is not a function’求助

问题核心原因 #

报错的本质是目标表格（main_table_2）的data参数初始化错误：你将data设为空字符串''，但JqGrid在datatype: 'local'模式下要求data必须是数组类型。空字符串不是数组，因此内部调用push方法时会抛出“not a function”错误。

同时你的事件处理逻辑存在两处冗余/不规范问题：

• 手动遍历行设置背景色，JqGrid自带选中行样式，无需重复实现
• 通过rowIndex+1获取行数据，依赖行索引的方式不可靠，应该直接使用行ID

解决方案 #

1. 修正目标表格的data初始化：将gridFormat_2中的data: ''改为data: []
2. 使用JqGrid原生事件替代手动绑定click：利用onSelectRow事件处理行点击，更稳定且符合组件规范
3. 通过行ID获取数据：用getRowData(rowid)替代索引方式，避免行ID不连续的问题

修改后的完整代码示例 #

目标表格配置修正 #

var gridFormat_2={
    data : [],  // 从空字符串改为空数组
    datatype : 'local',
    loadonce : true,
    viewrecords : true,
    width : 600,                 
    height : 500,                 
    rowNum : 50,                   
    rowList : [50,100,500],     
    rownumbers : false,               
    rownumWidth : 20,                  
    sortname : 'emp_no',           
    sortorder : 'asc',               
    multiselect : false,                
    sortable : false,              
    autowidth : true,                 
    iScroll : {zoom:true},          
    pager : '#jqGridPager_2',
    caption : ' ',
    whitespace : 'nowrap', 
    wordbreak : true,
    dragModel :{on: true, diHelper:['emp_no']},
    dropModel :{ on: true  },
    colModel :[
        {label: 'emp_no', name:'emp_no', index:'emp_no', sortable:false, sorttype:'text', width:50, align:'center', editable:false , height:'auto', cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal;"' }}, 
        {label: 'emp_nm', name:'emp_nm', index:'emp_nm', sortable:false, sorttype:'text', width:60, align:'center', editable:false , height:'auto', cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal;"' }}, 
        {label: 'pst_nm', name:'pst_nm', index:'pst_nm', sortable:false, sorttype:'text', width:60, align:'center', editable:false , height:'auto', cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal;"' }}, 
        {label: 'dept_nm', name:'dept_nm', index:'dept_nm', sortable:false, sorttype:'text', width:60, align:'center', editable:false , height:'auto', cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal;"' }}, 
        {label: 'dept_cd', name:'dept_cd', index:'dept_cd', sortable:false, sorttype:'text', width:130, align:'center', editable:false , height:'auto', hidden:true }, 
        {label: 'pst_cd', name:'pst_cd', index:'pst_cd', sortable:false, sorttype:'text', width:60, align:'center', editable:false , height:'auto', hidden:true }, 
    ],   
    beforeSelectRow : function (rowid, e) {
        var $myGrid = $(this),
        i  = $.jgrid.getCellIndex($(e.target).closest('td')[0]),
        cm = $myGrid.jqGrid('getGridParam', 'colModel');
        return (cm[i].name === 'cb');
    },
    loadError : function(xhr, status, err){ 
        try {
            jQuery.jgrid.info_dialog(
                jQuery.jgrid.errors.errcap,'' 
                + xhr.responseText + '', jQuery.jgrid.edit.bClose,
                {buttonalign:'right'}
            );
        } catch(e) { 
            alert(xhr.responseText);
        } 
    }
};

$.init_grid_table($("#main_table_2"),gridFormat_2);

$("#main_table_2").jqGrid('sortableRows',{
    update : function( e, html){ 
       console.log( html.item[0].id ); 
    }
});

事件处理代码修正 #

// 第一个表格配置添加onSelectRow事件
var gridFormat_1={
    data : '',
    datatype : 'local',
    loadonce : true,
    viewrecords : true,
    width : 600,                 
    height : 500,                  
    rowNum : 50,                   
    rowList : [50,100,500],     
    rownumbers : false,                
    rownumWidth : 25,                  
    sortname : 'emp_no',            
    sortorder : 'asc',                
    multiselect : false,                
    sortable : false,         
    autowidth : true,                 
    iScroll : {zoom:true},       
    pager : '#jqGridPager_1',
    caption : ' ',
    whitespace : 'nowrap', 
    wordbreak : true,
    colModel :[
        {label: 'emp_no', name:'emp_no', index:'emp_no', sortable:'text', sorttype:'text', width:50, align:'left', editable:false , height:'auto', cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal;"' }}, 
        {label: 'emp_nm', name:'emp_nm', index:'emp_nm', sorttype:'text', width:60, align:'left', editable:false , height:'auto', cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal;"' }}, 
        {label: 'pst_nm', name:'pst_nm', index:'pst_nm', sorttype:'text', width:60, align:'center', editable:false , height:'auto', cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal;"' }}, 
        {label: 'dept_nm', name:'dept_nm', index:'dept_nm', sorttype:'text', width:60, align:'center', editable:false , height:'auto', cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal;"' }}, 
        {label: 'dept_cd', name:'dept_cd', index:'dept_cd', sortable:'text', sorttype:'text', width:130, align:'left', editable:false , height:'auto', hidden:true }, 
        {label: 'pst_cd', name:'pst_cd', index:'pst_cd', sorttype:'text', width:60, align:'left', editable:false , height:'auto', hidden:true }, 
    ],    
    loadError : function(xhr, status, err){ 
        try {
            jQuery.jgrid.info_dialog(
                jQuery.jgrid.errors.errcap,'' 
                + xhr.responseText + '', jQuery.jgrid.edit.bClose,
                {buttonalign:'right'}
            );
        } catch(e) { 
            alert(xhr.responseText);
        } 
    },
    // 原生行选中事件，替代手动绑定click
    onSelectRow: function(rowid){
        AddrowSubtable(rowid);
    }
};

$.init_grid_table($("#main_table_1"),gridFormat_1);

// 修改添加行函数，接收行ID参数
function AddrowSubtable(rowid){
    var rowData = $("#main_table_1").getRowData(rowid);
    var addrowId = $("#main_table_2").getGridParam("reccount");
    $("#main_table_2").jqGrid('addRowData', addrowId+1 , rowData , 'last');
}

验证说明 #

1. 目标表格的data改为空数组后，JqGrid会正确初始化内部数据结构，支持push操作
2. 使用onSelectRow事件无需手动处理行索引和背景色，JqGrid会自动管理选中状态
3. 通过行ID获取数据避免了因分页、排序导致的索引错位问题

内容的提问来源于stack exchange，提问作者Jong Hyuk Lee