加载嵌套的 subgrd 时 jQGrid Firefox 问题

Question

我在 Firefox 中的 JqGrid 中面临一个问题，该问题通过对嵌套数据使用递归来加载子网格的第 n 个标签。

子网格总是在嵌套数据集中的第 16 级失败。

在 google chrome 和 IE 中工作正常，但在 Firfox 中发布。

这是我的代码：

<div style="width:20000px">
<table id="list" ></table>
<div id="pager1"></div>

jQuery("#list").jqGrid({
    datatype: "local",
    height: '100%',
    width: '100%',

    ExpandColClick:true,
    colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
    colModel:[
        {name:'id',index:'id', width:60, sorttype:"int"},
        {name:'invdate',index:'invdate', width:90, sorttype:"date"},
        {name:'name',index:'name', width:100},
        {name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
        {name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},
        {name:'total',index:'total', width:80,align:"right",sorttype:"float"},
        {name:'note',index:'note', width:150, sortable:false}
    ],
    subGrid:true,
    caption: "Manipulating Array Data",
    subGridRowExpanded:function(subgrid_id, row_id) {
        callSubGrid(subgrid_id,row_id);
    }
});

function addGridData(gridId){
    var mydata = [
        {id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}
    ];
    for(var i=0;i< mydata.length;i++){
        jQuery("#"+gridId).jqGrid('addRowData',i+1,mydata[i]);
    }
}


function callSubGrid(subgrid_id,row_id){
    var time=new Date().valueOf()
    var subgrid_table_id, pager_id;
    subgrid_table_id = 'row_id'+row_id+'_'+time+'_t';
    pager_id = 'p_'+subgrid_table_id;
    var table=getGridTable(subgrid_table_id,pager_id);

    $('#'+subgrid_id).html(table);

    jQuery("#"+subgrid_table_id).jqGrid({
        datatype: "local",
        height: '100%',
        width: '100%',
        colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
        colModel:[
            {name:'id',index:'id', width:60, sorttype:"int"},
            {name:'invdate',index:'invdate', width:90, sorttype:"date"},
            {name:'name',index:'name', width:100},
            {name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
            {name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},
            {name:'total',index:'total', width:80,align:"right",sorttype:"float"},
            {name:'note',index:'note', width:150, sortable:false}
        ],

        subGridOptions:{
            plusicon : "ui-icon-triangle-1-e",
            minusicon : "ui-icon-triangle-1-s",
            openicon : "ui-icon-arrowreturn-1-e",
            reloadOnExpand: false,
            selectOnExpand : true,
            expandOnLoad : false
        },

        caption: "Manipulating Array Data",
        subGrid:true,

        subGridRowExpanded:function(subgrid_id, row_id) {
            callSubGrid(subgrid_id,row_id);
        }
    });
    addGridData(subgrid_table_id);
}
addGridData('list');

enter image description here

请帮我解决这个问题，谢谢。

布里杰什·辛格

Answer 1

我建议您重新设计您尝试显示的网格并重写代码。您创建的所有子网格都具有相同的列标题和相同的（不需要的）标题。我认为 TreeGrid 可以更好地用于显示数据。

对您当前代码的备注：

• 请不要在循环中使用addRowData 来填充您创建的网格/子网格中的数据。应该使用网格的data 参数。
• 应该始终为每个子网格使用唯一的idPrefix。输入数据的id 将用作行的id 属性的值（id od <tr> 元素）。因此，可以得到 id 重复项。使用idPrefix，例如idPrefix: "s_" + rowid + "_"，会根据输入数据的前缀和id属性的值来设置id属性的值。因此，您可以防止 HTML 页面上的 id 重复。