[英]Using HandsonTable in Bootstrap Modal doesn't work
I'm trying to make use of this jquery plugin so I can have Excel-like cells on my website. 我正在尝试利用这个jquery插件,以便我的网站上可以有类似Excel的单元格。 However I'm using it with a modal as part of creating a new activity for an overview and that doesn't work quite as expected.
但是,我将它与模式一起使用,这是为概述创建新活动的一部分,但效果并不理想。
For one, the cell is not rendered correctly until the modal is closed and re-opened and when I try to destroy the cells after closing the modal so I can re-add them blank, it doesn't remove the old cells but just adds a new set underneath. 首先,在关闭并重新打开模态之前,单元格无法正确渲染,并且当我在关闭模态后尝试销毁单元格时,我可以将它们重新添加为空白,它不会删除旧单元格,而只是添加下面有一套新的。
I deduce that this is because the modal is hidden initially, so the library can't render the cells right. 我推断这是因为模态最初是隐藏的,所以库无法正确渲染单元格。 Because I tried to put it on a blank website where it worked just fine.
因为我试图将其放在空白网站上,但效果很好。 So I tried to add the cells after the modal is ready but that still doesn't work right.
所以我尝试在模态准备好后添加单元格,但仍然无法正常工作。
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();
});
}
I use the above to create the cells, and this is what I got: 我用上面的方法创建了单元格,这就是我得到的:
You can see that the picture stretches way beyond what it's supposed to hold in the three cells. 您会看到,图片的拉伸范围超出了三个单元格中的预期范围。 Now if I make the modal lose focus or close it, I get this:
现在,如果我使模式失去焦点或将其关闭,则会得到以下信息:
And a little further down I get this: 再往下走,我得到这个:
So clearly it has to do with the fact that I want to use the cells with an initially hidden element and probably also using the plugin wrong due to the fact that I can't even delete the previous set of cells. 显然,这与以下事实有关:我想使用带有最初隐藏的元素的单元格,并且由于我什至无法删除之前的单元格集而可能还使用了错误的插件。
Any help is appreciated :) 任何帮助表示赞赏:)
Playing with your fiddle changing hidden to hide seemed to fix the replication issue: 玩弄小提琴,将其隐藏隐藏起来似乎可以解决复制问题:
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();
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.