1

我怎样才能让我的（第一个）jqGrid 填充它的父容器而不丢失它的水平滚动条，因为它放得太远了？（滚动条是由scroll: 1选项创建的，例如“虚拟滚动”。）它似乎使用了我给它的高度而不允许滚动条，因此滚动条最终超出了我正在尝试的区域的底部保持它。我已经看到这两个 关于调整网格大小的问题（以及他们的答案），但是虽然有用（他们让我走到了这一步），但他们并没有解决滚动条问题。

页面的布局看起来像这样（它不是我的；我也许可以改变它，但如果我能避免这种情况最好——除了我可以做任何我想做的事情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 像素。但当然这会有所不同。

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

这是上述内容的实时副本（源链接），其中包含表格数据和用于试验软糖等的控件。

4

1 回答 1

2

jqGrid的height参数可以用来指定网格内部的高度（body 的高度）。在我看来，您可以通过修改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以修复其高度。你可以在这里看到固定的演示。

于 2012-04-12T15:09:24.300 回答