bootstrap 选项卡内的 jqGrid 不会显示

Question

我正在使用 jqGrid JS 5.3.0，并将 styleUI 设置为 Bootstrap。网格在没有 bootstrap 选项卡的情况下显示良好，但是有了这个 html（下面使用 mygrid "embedded" 从 getbootstrap.com 复制）内容区域是空白的，没有网格。

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade" id="home" role="tabpanel" aria-labelledby="home-tab">

<div><table id="mygrid"></table><div id="mygrid_pager"></div></div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>

如何让它在 "tab-pane" 中工作？ TIA。（现在不能包含 javascript 创建 "mygrid" 的代码）

Answer 1

您需要从

更改您的代码

<div class="tab-pane fade" id="home" role="tabpanel" aria-labelledby="home-tab">
<div><table id="mygrid"></table>

到

<div class="tab-pane fade in" id="home" role="tabpanel" aria-labelledby="home-tab"> <table id="mygrid"></table></div>

将 in class 添加到您的 #home 将在加载时显示它（从 <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a> 判断您希望它在加载时显示）并将 <table id="mygrid"></table> 移动到 div#home 将在选项卡内显示您的网格。

bootstrap 选项卡内的 jqGrid 不会显示

jqGrid inside a bootstrap tab won't show

jqgrid