javascript - 在 Bootstrap Modal 中使用 HandsonTable 不起作用

Question

我正在尝试使用 this jquery plugin所以我可以在我的网站上有类似 Excel 的单元格。但是，我将它与模态一起使用，作为为概览创建新事件的一部分，但效果不如预期。

首先，在关闭并重新打开模式之前，单元格无法正确呈现，当我在关闭模式后尝试销毁单元格以便我可以重新将它们添加为空白时，它不会删除旧单元格但只是在下面添加了一个新集合。

我推断这是因为模式最初是隐藏的，所以库无法正确渲染单元格。因为我试图把它放在一个空白的网站上，它运行得很好。因此，我尝试在模态准备就绪后添加单元格，但仍然无法正常工作。

function CreateHandsonTable() {
    $('#new-activity-modal').on('shown.bs.modal', function (e) {
        var data = [['Column A', 'Column B', 'Column C'], ['1', '2', '3']];
        var container = document.getElementById("example");
        hot = new Handsontable(container, {
            data: data
        });
    });
    $('#new-activity-modal').on('hidden.bs.modal', function (e) {
        hot.destroy();
    });
}

我使用上面的方法创建单元格，这就是我得到的:

您可以看到图片在三个单元格中超出了它应该容纳的范围。现在，如果我让模态失去焦点或关闭它，我会得到:

再往下一点我得到这个:

很明显，这与我想使用带有最初隐藏元素的单元格有关，而且由于我什至无法删除之前的一组单元格，可能还错误地使用了插件。

感谢任何帮助:)

我做了一个jsfiddle帮忙。

Answer 1

玩你的 fiddle 改变隐藏似乎解决了复制问题:

function CreateHandsonTable() {
    $('#new-activity-modal').on('shown.bs.modal', function (e) {
        var data = [['Column A', 'Column B', 'Column C'], ['1', '2', '3']];
        var container = document.getElementById("example");
        hot = new Handsontable(container, {
            data: data
        });
    });
    $('#new-activity-modal').on('hide.bs.modal', function (e) {
        hot.destroy();
    });
}