javascript - Tablesaw 未在 Bootstrap Carousel 中触发

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 中完成)知道元素的大小。您有两个 tablesaw 元素放置在 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