Question

我正在使用Tablesaw plugin来获取响应表。

在某些时候，我需要在Bootstrap Carousel的不同项目/幻灯片中包含不同的表格。

在加载时，Carousel的活动项目上的表格将正确显示（Tablesaw已正确启动），但一旦我移动到下一张幻灯片/项目，其中的表格将无法正确显示（Tablesaw未启动））。

Tablesaw包含一个在加载时启动的额外JS文件：

$( function(){
    $( document ).trigger( "enhance.tablesaw" );
});

这似乎适用于第一张幻灯片/项目，但不适用于其余部分。

有关为什么会发生这种情况的任何线索？

我创建了Plunker to illustrate the issue。

Answer 1

问题出在 Tablesaw 初始化中。 Tablesaw需要在初始化期间（在tablesaw-init.js中完成）知道元素的大小。你有两个tableaw元素放在bootstrap Carousel中，而一个是活动的而另一个不是。当您查看Carousel css时，您可以看到当前未激活的Carousel项目的display属性设置为none。未显示的元素将width和height设置为0。

因此解决方案可能是将文件tablesaw-init.js中的代码更改为：

;(function($) {
    $(function(){
      // Show all carousel items before Tablesaw intialization
      $(".carousel-inner > .item").css("display", "block");
      // Initialize the Tablesaw
      $( document ).trigger( "enhance.tablesaw" );
      // Remove the style added before initialization
      $(".carousel-inner > .item").removeAttr("style");
    });
})(jQuery);

此更改后，无需处理slid事件。

以下是您提到的更改的原始代码示例，因此您可以看到它正在运行https://plnkr.co/edit/Ocd0axmKLS1KDtGYlU4K?p=preview

Answer 2

您无法在隐藏表格上初始化Tablesaw。

因此，您必须将自定义初始化脚本设置为仅初始化可见表：

;(function($) {
    $(function(){
        // Initialize Tablesaw on the active carousel slide
        $('#carousel-einzelwerte .item.active').trigger('enhance.tablesaw');
        // Initialize Tablesaw on slide change
        $('#carousel-einzelwerte').on('slid.bs.carousel', function(e) {
            $(e.relatedTarget).trigger('enhance.tablesaw');
        });
    });
})(jQuery);

演示：https://plnkr.co/edit/JxOnj6dJVcmpyBrzEzrs?p=preview

在Bootstrap Carousel中没有触发Tablesaw

2 个答案: