Bootstrap标签页嵌套ParamQuery Grid，如何设置网格最小尺寸？

这个问题我之前在项目里碰到过，核心原因其实很明确——Bootstrap的非活动标签页默认是用display:none隐藏的，ParamQuery Grid在初始化时如果容器处于不可见状态，根本没法正确计算自身的宽高，所以才会缩成零尺寸。给你几个针对性的解决办法，亲测有效：

方法1：延迟初始化Grid，直到标签页激活时再创建 #

这是最推荐的方案，从根源避免了容器不可见导致的尺寸计算问题。不要一开始就初始化所有标签页里的Grid，只在用户第一次点击对应标签页时再初始化：

// 监听目标标签页的显示完成事件
$('#your-target-tab').on('shown.bs.tab', function () {
    // 先检查Grid是否已经初始化过，避免重复创建
    const $grid = $('#pq-grid');
    if (!$grid.data('pqGrid')) {
        // 初始化ParamQuery Grid
        const gridConfig = { 
            width: 700, 
            height: 400, 
            title: "ASO REPORTS",
            resizable: true, 
            draggable: true,
            // 这里加上你的数据源、列配置等其他必要项
            data: yourDataSourceArray
        };
        $grid.pqGrid(gridConfig);
    }
});

原理：当标签页激活后，容器变为可见状态，此时Grid初始化就能正确读取容器的尺寸信息，不会出现收缩问题。

方法2：提前初始化后，在标签页激活时强制刷新尺寸 #

如果因为业务需求必须提前初始化Grid（比如预加载数据），那就在标签页显示时调用Grid的resize或refresh方法，强制它重新计算宽高：

// 提前初始化Grid（此时容器处于隐藏状态）
const gridConfig = { 
    width: 700, 
    height: 400, 
    title: "ASO REPORTS",
    resizable: true, 
    draggable: true,
    data: yourDataSourceArray
};
$('#pq-grid').pqGrid(gridConfig);

// 监听标签页显示事件，触发Grid尺寸刷新
$('#your-target-tab').on('shown.bs.tab', function () {
    // 调用resize方法强制重新计算尺寸
    $('#pq-grid').pqGrid('resize');
    // 或者用refresh方法，同时会刷新数据和布局
    // $('#pq-grid').pqGrid('refresh');
});

方法3：给标签页容器设置最小高度（临时 workaround） #

如果上面两种方法都不适用，可以给Grid所在的标签页内容容器设置固定的min-height，让Grid初始化时有尺寸参考：

/* 替换成你实际的标签页内容容器ID */
#tab-content-for-grid {
    min-height: 400px; /* 和Grid配置里的height保持一致 */
}

不过这个方法比较死板，当窗口尺寸变化时可能会出现适配问题，只适合简单场景。

补充说明：你之前尝试的collapsible: { collapsed : false }是控制Grid自带的折叠面板状态，和容器不可见导致的尺寸问题完全不相关；resizable: false只是禁用了手动调整尺寸的功能，当然解决不了根本问题啦～

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