jqxGrid嵌套网格在Firefox部分行不显示（Chrome/Edge正常）

问题背景 #

通过jqxGrid的rowdetails: true和initrowdetails配置实现行内嵌套子网格，Chromium系浏览器（Chrome/Edge）运行正常，但Firefox中前9行的嵌套网格完全不显示，控制台无报错，尝试用setTimeout包裹创建代码也无效。

可行修复方案 #

1. 结合requestAnimationFrame与强制刷新 #

Firefox的DOM渲染时序与Chromium存在差异，前9行的详情容器可能未完全插入DOM就执行了网格初始化逻辑。用requestAnimationFrame替代setTimeout，确保代码在浏览器下一次重绘前执行，同时创建网格后强制触发刷新：

$("#orderComparisonGrid").jqxGrid({
    width: '100%',
    pageable: true,
    autoheight: true,
    rowdetails: true,
    initrowdetails: initRowDetailsFunction,
    // 其他配置项
});

function initRowDetailsFunction(index, parentElement, gridElement, record) {
    var detailsContainer = $($(parentElement).children()[0]);
    var nestedDiv = $("<div style='margin: 10px; min-height: 60px;'></div>");
    detailsContainer.append(nestedDiv);

    if (record.ComponentCodeList && record.ComponentCodeList.length > 0) {
        window.requestAnimationFrame(() => {
            nestedDiv.jqxGrid({
                width: '95%',
                autoheight: true,
                source: new $.jqx.dataAdapter({ localdata: record.ComponentCodeList, datatype: "array" }),
                columns: [
                    { text: 'Component Name', datafield: 'Name' },
                    { text: 'Amount', datafield: 'Amount' }
                ]
            });
            // 强制刷新嵌套网格，确保渲染完成
            nestedDiv.jqxGrid('refresh');
        });
    }
}

2. 明确指定行详情模板与高度 #

通过rowdetailstemplate自定义详情容器结构，并设置固定初始高度，避免Firefox因尺寸计算异常导致网格隐藏：

$("#orderComparisonGrid").jqxGrid({
    width: '100%',
    pageable: true,
    autoheight: true,
    rowdetails: true,
    // 自定义行详情模板，带唯一ID和固定高度
    rowdetailstemplate: {
        rowdetails: "<div id='nested-grid-{0}' style='margin: 10px;'></div>",
        rowdetailsheight: 220
    },
    initrowdetails: initRowDetailsFunction,
    // 其他配置项
});

function initRowDetailsFunction(index, parentElement, gridElement, record) {
    // 通过ID获取预定义的容器
    var nestedDiv = $("#nested-grid-" + index);

    if (record.ComponentCodeList && record.ComponentCodeList.length > 0) {
        nestedDiv.jqxGrid({
            width: '95%',
            autoheight: true,
            source: new $.jqx.dataAdapter({ localdata: record.ComponentCodeList, datatype: "array" }),
            columns: [
                { text: 'Component Name', datafield: 'Name' },
                { text: 'Amount', datafield: 'Amount' }
            ]
        });
    }
}

3. 禁用父网格虚拟化（临时修复/排查） #

如果上述方案无效，可尝试关闭父网格的行虚拟化（jqxGrid默认开启），Firefox下的虚拟化逻辑可能导致前几行的详情容器未正确初始化：

在父网格配置中添加：

virtualmode: false

注：该方案会影响大数据量场景下的性能，仅适合小数据量场景或临时排查使用。

内容的提问来源于stack exchange，提问作者E__