Question

如何让我的（第一个）jqGrid填充其父容器而不会丢失其水平滚动条，将其放得太远？（滚动条是由scroll: 1选项创建的滚动条，例如“虚拟滚动”。）似乎使用我给它的高度而不用允许滚动条，因此滚动条结束了我想要保留它的区域的底部。我已经看到这些two questions关于调整网格（及其答案）的大小，但是虽然有用（他们让我这个它们没有解决滚动条问题。

页面的布局看起来像这样（它不是我的;我可能能够改变它，但如果我能避免这种情况最好 - 除了我可以做任何事情我想要gridWrapper）：

HTML：

<body>
  <div id="pageHeader">Header section</div>
  <div id="pageBody">
    <div id="gridWrapper" style="height: 100%">
    </div>
  </div>
  <div id="pageFooter">Footer section</div>
</body>

CSS：

body {
  margin: 0;
  padding: 0;
  font-family: verdana, sans-serif;
}
#pageHeader {
  width: 100%;
  height: 99px;
  border-bottom: solid 1px #ccc;
}
#pageBody {
  background-color: #fff;
  position: fixed;
  top: 100px;
  bottom: 45px;
  left: 0;
  right: 0;
}
#pageFooter {
  background-color: #eee;
  position: fixed;
  left: 0; 
  right: 0;
  bottom: 0;
  height: 44px;
  border-top: solid 1px #ccc;
}

我的网格创建/大小调整代码如下所示（您可以告诉它的测试/原型代码）：

function createGrid(data) {
  var colNames, colModel, index, grid, gridParent, theFudge, heightFudge = 0;

  colNames = [
    "One", "Two", "Three", "Four", "Five",
    "Six", "Seven", "Eight", "Nine", "Ten",
    "Eleven", "Twelve", "Thirteen", "teen", "Fifteen",
    "Sixteen", "Seventeen", "Eightteen", "Nineteen", "Twenty",
    "Twenty One", "Twenty Two", "Twenty Three", "Twenty Four",
    "Twenty Five"
  ];
  colModel = [];
  for (index = 0; index < colNames.length; ++index) {
    colModel.push({
      name:   "col" + index,
      id:     "col" + index,
      width:  75
    });
  }

  gridParent = $("#gridWrapper");
  grid = $('<table id="theTable"></table>').appendTo(gridParent);
  grid.jqGrid({
    datatype:    'local',
    data:        data,
    height:      gridParent.height() - heightFudge,
    width:       gridParent.width(),
    shrinkToFit: false,
    colNames:    colNames,
    colModel:    colModel,
    rownumbers:  true,
    rownumWidth: 75,
    scroll:      1
  });

  $(window).resize(resizeGrid);

  function resizeGrid() {
    grid.jqGrid('setGridWidth', gridParent.width());
    grid.jqGrid('setGridHeight', gridParent.height() - heightFudge);
    grid.trigger('reloadGrid');
  }
}

您会看到heightFudge值（上面的值只是0）。如果我没有捏造高度，则滚动条超出pageBody的底部，侵入（并隐藏）pageFooter。在我的浏览器上，我的字体和窗口装饰等等，软糖因子（滚动条的高度）是24像素。但当然会有所不同。

如何让网格填充网格包装并将其水平滚动条保持在我给它的高度范围内？（或者我怎样才能在运行时可靠地确定软糖因子，但这对我来说似乎很糟糕。）

Here's a live copy of the above（source link），包含用于试验软糖等的表和控件的数据。

Answer 1

jqGrid的height参数可用于指定网格 inner 部分的高度（正文的高度）。在我看来，您可以通过将resizeGrid修改为以下

来解决问题

function resizeGrid() {
  var $grid = $("#theTable"),
      $gbox = $grid.closest(".ui-jqgrid"), // or $("gbox_theTable");
      outerHeight = $gbox.height() - $grid.jqGrid('getGridParam', 'height');
  $grid.jqGrid('setGridWidth', gridParent.width());
  $grid.jqGrid('setGridHeight', gridParent.height() - heightFudge - outerHeight);
  $grid.trigger('reloadGrid');
}

创建网格后，您必须立即调用resizeGrid来修复其高度。您可以看到固定演示版here。

使jqGrid填充父级而不会丢失其水平滚动条？

1 个答案: