为什么每次调用“show()”时我的 JqGrid 都会缩小？答案

【问题标题】：Why my JqGrid shrinks every time when I call 'show()'?为什么每次调用“show()”时我的 JqGrid 都会缩小？
【发布时间】：2021-10-14 15:11:11
【问题描述】：

每次我从下拉菜单中选择 OPTION 时，我都会尝试在页面上显示一个 JqGrid，其中包含三个选项（OPTION、TEXTUAL strong> 和 VALUE）。我正在使用show 和hide，以便至少在用户在该页面上的时间内保存用户输入的值。当页面加载时已经在下拉菜单中选择了 OPTION，那么即使在切换到其他选项导致表格隐藏然后返回到 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 () { }
            });

收缩就是这个意思：

【问题讨论】：

你试过 autowidth: false 吗？
是的，我也试过了。它只是从网格中删除水平滚动条。

标签： javascript html css jqgrid

【解决方案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（如果可以的话）。

【讨论】：

嘿，我读过文档说他们会在下次升级时更改它。我尝试添加像100% 或700px 这样的硬编码宽度，但问题仍然存在
你能建议我如何在我的网格中使用flex height
正如我在答案中所示，在父母拥有display: flex 的孩子上使用flex: 1 1 auto 将使该孩子填满整个容器。不需要做任何宽度或高度。
<div class="row table-responsive"> <div class="col-md-12 flex"> <div class="GridDiv" style="flex: 1 1 auto;"> <table id="tblSurveyOption"></table> <div id="divSurveyOption"></div> </div> </div> </div> 我已经在我的 cshtml 文件中进行了这些更改，并从我的 JqGrid 中删除了宽度属性，但问题仍然存在。

【解决方案2】：

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

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

【讨论】：