将HandsOnTable约束为其父容器的大小

Question

我意识到这是一个简单的例子，但是我想得到一些关于HandsOnTable期望在容器中行为的解释。例如，我们有一个放置HoT的Tab，我们希望它消耗100%的容器空间，但是现在它似乎没有受到限制。

下面是一个例子。我们想把它限制在红色的盒子里。

​

document.addEventListener("DOMContentLoaded", function() {

  var
    myData = Handsontable.helper.createSpreadsheetData(200, 100),
    container = document.getElementById('example1'),
    hot;

  hot = new Handsontable(container, {
    data: myData,
    rowHeaders: true,
    colHeaders: true,
    fixedColumnsLeft: 2,
    contextMenu: true,
    manualColumnFreeze: true
  });

  function bindDumpButton() {
    if (typeof Handsontable === "undefined") {
      return;
    }

    Handsontable.Dom.addEvent(document.body, 'click', function(e) {

      var element = e.target || e.srcElement;

      if (element.nodeName == "BUTTON" && element.name == 'dump') {
        var name = element.getAttribute('data-dump');
        var instance = element.getAttribute('data-instance');
        var hot = window[instance];
        console.log('data of ' + name, hot.getData());
      }
    });
  }
  bindDumpButton();

});

</style><!-- Ugly Hack due to jsFiddle issue -->

<script src="http://docs.handsontable.com/0.15.0-beta3/scripts/jquery.min.js"></script>
<script src="http://docs.handsontable.com/0.15.0-beta3/bower_components/handsontable/dist/handsontable.full.js"></script>
<link type="text/css" rel="stylesheet" href="http://docs.handsontable.com/0.15.0-beta3/bower_components/handsontable/dist/handsontable.full.min.css">

<div style="height: 100px; width: 100px; background-color: red;">
  <div id="example1" class="hot handsontable"></div>
</div>

​

http://jsfiddle.net/jxh52650/

Answer 1

不幸的是，红色没有显示在小提琴上，但我认为你想要的是stretchH:"all"属性。这确保了如果您在父容器上设置了一个width，它将拉伸所有列以100%填充它。之后，您希望将容器的样式设置为overflow:auto，这将将热实例限制在指定的宽度和高度，然后使用滚动条。