javascript - TabView 中的 YUI3 滚动数据表不呈现

Question

我在 YUI3 Tabview 中有一些标签。每个选项卡都包含几个 YUI3 可滚动数据表。数据表已创建但未呈现。我所能看到的只是每个数据表第一列的一部分。

然而，如果我调整浏览器窗口的大小，我可以看到呈现的表格。我怀疑每次切换到不同的选项卡时都必须以某种方式重新渲染表格。我怎样才能做到这一点？

数据表是独立于选项卡/选项卡视图创建的。

任何帮助将不胜感激。

Answer 1

是的，滚动 DataTables 需要在渲染时位于可见容器中，因为它们需要计算表格中某些元素的大小，如果它们display: none位于隐藏选项卡下，则无法执行此操作。避免这种情况的方法是等到显示将保存数据表的选项卡。您可以通过收听selectedChange选项卡事件的“之后”阶段来做到这一点。例如：

tabview.item(1).after('selectedChange', function (e) {
  if (e.newVal) {
    table.render();
 }
});

这是一个工作示例：http: //jsfiddle.net/juandopazo/H2ASR/2/