我知道这是一个简单的示例,但我想获得一些有关 HandsOnTable 期望在容器中的行为方式的解释。例如我们有一个用于放置 HoT 的选项卡,我们希望它占用 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>
最佳答案
不幸的是, fiddle 中没有显示红色,但我认为您想要的是 stretchH:"all"
属性。这确保如果您在父容器上设置 width
,它将拉伸(stretch)所有列以 100% 填充它。之后,您希望将容器的样式设置为 overflow:auto
,这会将 HOT 实例限制为指定的宽度和高度,然后使用滚动条。
关于javascript - 将 HandsOnTable 限制为其父容器的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30739926/