在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

玩你的小提琴改变隐藏隐藏似乎解决了复制问题：

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();
    });
}