引导选项卡中的jqGrid将不会显示 [英] jqGrid inside a bootstrap tab won't show

问题描述

我正在使用styleUI设置为Bootstrap的jqGrid JS 5.3.0.网格显示正常，没有引导程序选项卡，但是使用此html(以下从带有mygrid嵌入"的mybootd从getbootstrap.com复制的内容)，内容区域为空白，没有网格.

I'm using jqGrid JS 5.3.0 with styleUI set to Bootstrap. The grid displays fine without bootstrap tabs, but with this html (below copied from getbootstrap.com with mygrid "embedded") the content area is blank with no grid.

<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>

如何使它在选项卡窗格"中工作? TIA. (目前不能包含创建"mygrid"的javascript代码)

How can I make it work inside a "tab-pane"? TIA. (can't include javascript code of creating "mygrid" right now)

推荐答案

您需要从以下位置更改代码

You need to change your code from

<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类添加到#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将会在选项卡内显示网格.

adding the in class to your #home will show it on load (judging from <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a> you want it to show on load) and moving <table id="mygrid"></table> into div#home will show your grid inside the tab.

这篇关于引导选项卡中的jqGrid将不会显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！