Question

我正在使用handontable，我想在页面或div中显示一个表格。

我设法通过在启动表后更改容器div的宽度来实现此目的（请参阅代码段）。然而，这似乎很麻烦。

＆＃13;

$(document).ready(function () {

  var container = document.getElementById('basic_example');
  
  var hot = new Handsontable(container, {
    data: Handsontable.helper.createSpreadsheetData(10, 12),
    colHeaders: true,
    rowHeaders: true,
    afterInit: function () {
      $("#basic_example").css("width", $("#basic_example .wtHider").css("width")) 
    }
  });
  
});

＆＃13;

#basic_example {
  margin-left: auto;
  margin-right: auto;
}

＆＃13;

<link href="http://handsontable.com//styles/main.css" rel="stylesheet">
<link href="http://handsontable.com//bower_components/handsontable/dist/handsontable.full.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://handsontable.com//bower_components/handsontable/dist/handsontable.full.min.js"></script>

<div id="basic_example"></div>

＆＃13;

是否有一种简单/更好的方法可以集中精神？

Answer 1

使用您的变通方法，我建议使用afterRender而不是afterInit，以便在呈现handontable时更新表的大小。

如果用户更改屏幕大小，允许添加列或行或者在初始初始化后表格还有其他更改大小的可能性，这将特别有用。

Answer 2

基于先前的答案，我使用了afterRender（和afterChange）事件，如下所示：

  afterRender: function () {
    let wtHider = document.querySelector('#tableContainer .wtHider');
    container.style.width = wtHider.style.width
  },

但是，当您隐藏一列时，似乎在更新wtHider类的元素之前，过早触发了afterRender。

添加0毫秒的延迟即可解决此问题：

   afterRender: function () {
    let wtHider = document.querySelector('#tableContainer .wtHider');
    setTimeout(() => {
      container.style.width = wtHider.style.width
    }, 0);
  },

注意：已使用铬版本87.0.4280.66，Ubuntu 20.04和handontable 8.2.0进行了测试

如何正确对待动手

2 个答案: