在 Bootstrap 模式中使用 HandsonTable 不起作用

Question

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

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

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

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 将 hidden 更改为 hide 似乎解决了复制问题：

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

在 Bootstrap 模式中使用 HandsonTable 不起作用

Using HandsonTable in Bootstrap Modal doesn't work

javascript

css

jquery

twitter-bootstrap

handsontable