JSF应用中Bootstrap标签页内ag-grid无法显示数据问题

这个问题我之前碰到过好几次，根源就在Bootstrap标签页的隐藏特性上！

问题原因 #

Bootstrap的tab-pane fade容器在页面加载完成时默认处于隐藏状态（display:none），而ag-grid初始化时需要依赖可见的DOM容器来正确计算网格尺寸、渲染单元格。如果初始化时容器是隐藏的，哪怕rowData已经正确赋值，ag-grid也没法完成完整的渲染流程，导致网格看起来是空的。

解决方案：延迟初始化/标签页激活时触发渲染 #

我们需要把ag-grid的初始化时机从jQuery(document).ready()改成标签页被激活显示的时候，或者在标签页激活时强制网格重新布局。下面给两种可行的实现方式：

方式1：标签页激活时才初始化ag-grid

修改你的JS代码，去掉ready里的初始化逻辑，改为监听Bootstrap的shown.bs.tab事件：

var columnDefinitions = [...]; // 保持你的列定义不变
var rowData = #{fooView.getBarListAsJson()};
var gridOptions = {
    columnDefs: columnDefinitions,
    rowData: rowData,
    // 其他你的grid配置...
};
var gridInstance = null;

// 监听标签页激活事件
jQuery('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    var targetTabId = jQuery(e.target).attr('href');
    // 检查当前激活的是不是你的网格所在的标签页
    if (targetTabId === '#tab-n') {
        if (!gridInstance) {
            // 首次激活时初始化网格
            var gridDiv = document.querySelector('#myGrid');
            gridInstance = new agGrid.Grid(gridDiv, gridOptions);
        } else {
            // 如果已经初始化过，强制刷新布局
            gridInstance.api.sizeColumnsToFit();
            gridInstance.api.refreshCells({force: true});
        }
    }
});

方式2：提前初始化，但标签页激活时强制刷新

如果你希望提前初始化网格，只是在标签页显示时触发渲染，可以这样改：

var columnDefinitions = [...];
var rowData = #{fooView.getBarListAsJson()};
var gridOptions = {
    columnDefs: columnDefinitions,
    rowData: rowData,
    // 可以加上这个配置，让网格在容器可见时自动调整
    enableColResize: true,
    // 其他配置...
};
var gridInstance = null;

jQuery(document).ready(function() {
    var gridDiv = document.querySelector('#myGrid');
    gridInstance = new agGrid.Grid(gridDiv, gridOptions);
});

// 监听标签页激活事件，触发刷新
jQuery('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    var targetTabId = jQuery(e.target).attr('href');
    if (targetTabId === '#tab-n') {
        // 强制网格重新计算尺寸并刷新单元格
        gridInstance.api.sizeColumnsToFit();
        gridInstance.api.refreshCells({force: true});
    }
});

额外注意点 #

• 确保你的标签页的data-toggle="tab"和对应的href属性正确关联到tab-n容器。
• 如果你的网格有复杂的渲染逻辑，也可以在shown.bs.tab事件里重新设置一次rowData（比如gridInstance.api.setRowData(rowData)），确保数据被正确渲染。

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