如何在div标签中包含创建的slickgrid？

Question

目前我正在尝试创建一个可以容纳多个SlickGrids的页面。我不希望网格变得过于压缩，因此如果页面上的多个网格太大，我只想滚动它们。但是，我不想滚动整个页面，因为页面顶部有信息我想保持可见。

我希望能够做的是有一个div将包含所有网格，如果网格延伸到该元素的底部，我将能够滚动。然而，当我测试这个时，SlickGrid的一代似乎迫使网格溢出div，完全忽略了它的界限！

测试代码如下（生成来自AJAX调用的数据除外）。我没有改变网格或包含元素的大小。

HTML：

<div style='height:500px; width: 1200px; overflow:hidden !important; border:1px solid red; z-index:500000; margin-left:20px;' id='showTable'>
    <div id="myGrid" style="width: 1200px; height: 700px;"></div>
</div>

JavaScript调用：

grid = new Slick.Grid("#myGrid", data, columns, options);
grid.setSelectionModel(new Slick.RowSelectionModel());

到目前为止，我尝试使用ul而不是div作为包含元素，并在完全加载网格后将网格追加到包含元素 - $("#showTable").append($("#myGrid"));中。

结果是网格只位于外部元素的顶部（红色是我想要包含的元素的边框，你也可以看到我有一个按钮。这些列是故意的模糊）：

http://i.imgur.com/04DqC16.png

任何见解？

Answer 1

<div style='height:500px; width: 1200px; overflow:hidden !important; border:1px solid red; z-index:500000; margin-left:20px;' id='showTable'>
    <div id="myGrid" style="width: 1200px; height: 700px;"></div>
</div>

我认为你的#myGrid div超出了外部div的高度，这就是为什么它看起来忽略了它的边界。

您可以定义网格的绝对高度和宽度，使其适合您的外部div元素。

还可以将overflow属性定义为滚动而不是隐藏

overflow:scroll

这会使内部div隐藏但仍可滚动

要避免使用2个滚动（div滚动和网格滚动），可以通过将autoHeight属性指定为true来删除网格滚动：

  var options = {
      enableCellNavigation: true,
      enableColumnReorder: false,
      autoHeight: true,
  };

现在，您可以在外部div中包含2个或更多网格：

  <div id="showTable" style="overflow:auto;width:600px;height:300px;border:1px solid red">
      <div id="myGrid" style="width:600px;height:500px;"></div>
      <div id="myGrid2" style="width:600px;height:500px;"></div>
  </div>