Question

首先，我使用功能addTable创建一个Handsontable。我创建一个ID为'hotTable'的div，它是Table的容器。当我尝试将全屏容器div设置为全屏时，一切正常。但是，如果我尝试向下滚动表，则不会显示更多信息。桌子的其余部分只有黑色。

// If status = false request fullscreen
fullscreen(status, id, callback = function () {}) {
  if(status) {
    document.exitFullscreen();
  } else {
    var element = document.getElementById(id);
    element.parentNode.requestFullscreen();
    element.style.width = '100%';
    element.style.height = '100%';
    element.style.overflow = 'auto';
  }
callback();
}

// create Handsontable
addTable(ifcClass) {

  let self = this;
  this._hots[ifcClass] = null;
  this._tabs[ifcClass] = document.createElement("DIV");
  this._div.appendChild(this._tabs[ifcClass]);
  this._div.id = "hotTable";
  // add a button to open the tab
  let func = function() {
    self.openTab(ifcClass)
  };

  // let btn = newButton(ifcClass, func);
  // this._rightButtonDiv.appendChild(btn);
  // this._contentDiv.appendChild(this._tabs[ifcClass]);

}

我希望将容器设置为全屏显示，然后使用Table对其进行扩展。但是该表仅加载前几行就不会完成。

这是一个具有相同问题的JSFiddle：

https://jsfiddle.net/patrickluethi97/qreLuxkb/

Answer 1

您需要在表周围创建一个容器。将Handsontable设置为容器的宽度/高度的100％，然后将容器尺寸修改为全屏。

正在使用JSfiddle： https://jsfiddle.net/jsfLn3pc/

HTML：

<div id="container">
  <div id="example"></div>
</div>

JS：

var data = function () {
  return Handsontable.helper.createSpreadsheetData(100, 10);
};

var container = document.getElementById('example');

var hot = new Handsontable(container, {
  data: data(),
  minSpareCols: 1,
  minSpareRows: 1,
  rowHeaders: true,
  colHeaders: true,
  contextMenu: true,
  width: '100%',
  height: '100%',
});

var button = document.getElementById("test");
button.addEventListener("click", function () {
    fullscreen('container');
})

function fullscreen(id) {
    var element = document.getElementById(id);
    element.parentNode.requestFullscreen();
    element.style.width = '100%';
    element.style.height = '100%';
}

CSS：

body {
  margin: 20px 30px;
  font-size: 13px;
}

a {
  color: #34A9DC;
  text-decoration: none;
}

p {
  margin: 5px 0 20px;
}

h2 {
  margin: 20px 0 0;
  font-size: 18px;
  font-weight: normal;
}

#container {
  width: 400px;
  height: 400px;
  overflow: hidden;
}

为什么Handsontable无法以全屏模式显示所有单元格？

1 个答案: