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

Question

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

我希望能够拥有一个包含所有网格的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: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>