在单击鼠标右键之前，HandsOnTable 不会呈现所有列

Question

这看起来完全是疯了，我什至无法 post 一个合适的 JSFiddle，因为我无法复制它，但是...

我有一个包含在 div 中的 handsontable 元素，应该用于强制滚动条。 table 只有 3 列，但只有第一列呈现（我可以通过开发人员控制台检查发现其他两列不存在），直到我右键单击 HandsOnTable 元素。

table是基于这个：https://jsfiddle.net/horacebury/2vc606wx/30/

我使用的 CSS 是这样的：

#handscontainer {
    width: 320px;
    height: 400px;
    padding: 0px;
    margin: 0px;
    border: 0px;
    overflow: hidden;
}

#trendgrid {
    width: 300px;
}

我用的HTML是这样的：

                    <div id="tablecontainer">
                      <table class="tgh">
                        <tr>
                          <td>Tag Name</td>
                        </tr>
                      </table>
                      <div id="handscontainer">
                        <div id="trendgrid" class="maximise"></div>
                      </div>
                      <table class="tg">
                        <tr>
                          <td class="footbuffer"></td>
                          <td class="tg-yw4l" ng-repeat="item in items track by $index">{{item}}</td>
                        </tr>
                      </table>
                    </div>

如果我没有 overflow: xxx 则问题不存在并且 table 非常非常长（因为我需要加载 ~288 行。）

Answer 1

原来显示 HandsOnTable 元素的 angular 选项卡不可见。我必须创建该选项卡 active/visible，然后使用 $interval 在加载数据之前让 HoT 有片刻的控制权。

        $interval(function() {
                loadTableData();
            },
            100,
            1);

Answer 2

我通过删除 outsideClickDeselects: false 解决了这个问题。

Answer 3

HandsonTable 不知道模式的宽度，这就是为什么它只渲染默认列（第一个 td）。只需要在显示模态后延迟创建 HandsonTable。

window.setTimeout(function () {
  loadTableData();
},1000);

在单击鼠标右键之前，HandsOnTable 不会呈现所有列

HandsOnTable not rendering all columns until right mouse click

css

jsfiddle

handsontable