为什么每次调用 'show()' 时我的 JqGrid 都会缩小？

Question

每次我从下拉菜单中选择 OPTION 时，我都试图在页面上显示一个 JqGrid，它由总共三个选项组成（OPTION,TEXTUAL 和 VALUE)。我正在使用 show 和 hide，这样我至少可以在用户访问该页面时保留用户输入的值。当页面加载时 OPTION 已经在下拉菜单中选择，然后 table 显示并且工作正常，即使切换到其他选项导致隐藏 table 然后回到 OPTION，它仍然工作正常。当我使用选定的选项 TEXTUAL 或 VALUE 加载页面时，问题就出现了。当我将选项更改为 OPTION 时，它会缩小我的 jqGrid。当我通过从工具栏中选择它来移动 chrome 浏览器时，它会自动修复它。

<div class="row table-responsive">
 <div class="col-md-12">
  <div class="row">
   <div class="col-md-12">
    <div class="jqGrid" style="display:block">
     <table id="OptionTable"></table>
     <div id="divOptionTable"></div>
    </div>
   </div>
 </div>
</div>
</div>

隐藏和显示 jqGrid 的脚本

if($("#dropdownmenu").val()=="Option")
          {             
             $(".jqGrid").show();
          }
    else
          {
             $(".jqGrid").hide();
          }
        });

我的 JQGrid 代码：

$("#OptionTable").jqGrid({
                mtype: "GET", 
                url: "---url---",
                datatype: "json",
                async: false,
                colNames: [
                   "col0", "col1", "col2"
                ],
                colModel: [
                    { key: true, name: "col0", index: "col0", editable: false, hidden: true },
                    { key: false, name: "col1", index: "col1", editable: false, hidden: false },
                    { key: false, name: "col2", index: "col1", editable: false, hidden: true }
                ],
                pager: jQuery("#divOptionTable"),
                rowNum: -1,
                scroll: 0,
                height: $(window).innerHeight() - 450,
                width: '100%',
                viewrecords: true,
                caption: "---caption---",
                emptyrecords: "No records",
                jsonReader: {
                    root: "rows",
                    page: "page",
                    total: "total",
                    records: "records",
                    repeatitems: false
                },
                autowidth: true,
                loadonce: false,
                gridview: true,
                multiselect: false,
                onSelectRow: function (id, status, e) {},
                beforeProcessing: function (data, status, xhr) {},
                ajaxGridOptions: { cache: false },
                gridComplete: function () { },
                ondblClickRow: function () { }
            });

收缩是什么意思：

Answer 1

只是一个随机猜测（因为它可能有很多东西）但 $(window).innerHeight 可能是问题所在。如果网格在页面布局上生成，没有任何内容，它可能会给您不同的结果，具体取决于您的初始页面内容和元素的状态。根据文档，您应该改用 clientHeight 。除此之外，Jquery 文档还提到在不可见元素上使用 innerHeight 可能会产生不正确的结果。

但总的来说，这并不是真正的方法。

body {
  display: flex;
  flex-flow: column nowrap;
  min-height: 100vh;
  margin: 0;
}

...

.parent {
  flex: 1 1 auto;
  display: flex;
}

.child {
  flex: 1 1 auto;
}

...

.grid {
  flex: 1 1 auto;
  display: flex;
  // height: calc(100vh - 450px);
}

如果可能，从该元素中删除所有 jquery 高度和宽度的东西，并用 flex 替换它（如果可以的话）。

Answer 2

$("#tblSurveyOption").jqGrid('setGridWidth',  $(window).innerWidth());

我不知道有没有错误。我在 JQGrid 函数的末尾使用了这个函数，效果很好。

为什么每次调用 'show()' 时我的 JqGrid 都会缩小？

Why my JqGrid shrinks every time when I call 'show()'?

html

javascript

css

jqgrid