jqGrid JS 5.3.0嵌入Bootstrap标签页后无法显示的问题

我太懂这个坑了！之前帮好几个开发者解决过jqGrid在Bootstrap标签页里空白的问题，核心原因就是Bootstrap默认会把未激活的标签面板设为display: none，而jqGrid 5.3.0在初始化的时候，如果容器是隐藏状态，根本没法正确计算网格的宽高，结果就是渲染出来一片空白。给你几个实测有效的解决办法：

方法1：在标签激活时才初始化jqGrid #

最稳妥的方式是等目标标签被激活、面板可见后，再初始化jqGrid，这样网格能正确获取容器尺寸：

// 监听标签切换事件
$('#myTab a').on('shown.bs.tab', function (e) {
  // 获取当前激活的面板ID
  const targetTab = $(e.target).attr("href");
  
  // 假设你的jqGrid放在#home面板里
  if (targetTab === "#home") {
    // 先判断是否已经初始化过，避免重复执行
    if (!$(targetTab + " #mygrid").hasClass("ui-jqgrid")) {
      $(targetTab + " #mygrid").jqGrid({
        styleUI: 'Bootstrap',
        url: '你的数据接口地址',
        colModel: [
          { name: 'id', label: 'ID', width: 80 },
          { name: 'username', label: '用户名', width: 150 },
          // 其他列配置...
        ],
        rowNum: 10,
        pager: '#pager',
        viewrecords: true,
        // 其他网格配置...
      });
    }
  }
});

方法2：页面加载时初始化，激活标签后调整尺寸 #

如果需要页面一加载就完成初始化，可以先临时显示隐藏的面板，让jqGrid能计算尺寸，初始化后再恢复隐藏，之后监听标签激活事件调整网格大小：

$(document).ready(function() {
  const $homePanel = $('#home');
  const wasHidden = $homePanel.is(':hidden');
  
  // 临时显示面板
  if (wasHidden) {
    $homePanel.show();
  }

  // 初始化jqGrid
  $('#mygrid').jqGrid({
    styleUI: 'Bootstrap',
    // 你的网格配置项...
  });

  // 恢复面板原状态
  if (wasHidden) {
    $homePanel.hide();
  }

  // 监听标签激活，调整网格宽度
  $('#myTab a').on('shown.bs.tab', function (e) {
    const targetTab = $(e.target).attr("href");
    if (targetTab === "#home") {
      // 减去面板内边距的宽度，避免横向滚动条
      const panelWidth = $(targetTab).width() - 20;
      $('#mygrid').jqGrid('setGridWidth', panelWidth);
    }
  });
});

方法3：修改Bootstrap标签的隐藏逻辑（应急用） #

不推荐长期用，但如果赶时间可以试试：把Bootstrap默认的display: none改成visibility: hidden，这样容器尺寸依然能被计算到，只是视觉上隐藏：

.tab-content .tab-pane {
  display: block !important;
  visibility: hidden;
  position: absolute;
  width: 100%;
}
.tab-content .tab-pane.active {
  visibility: visible;
  position: static;
}

这个方法可能会影响页面布局，所以优先选前两种方案。

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