TabView中的YUI3 Scroll-Datatables无法渲染

时间:2012-11-20 11:57:42

标签: javascript yui yui3 tabview yui-datatable

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

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

数据表的创建独立于Tabs / Tabview。

非常感谢任何帮助。

1 个答案:

答案 0 :(得分:0)

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

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

以下是一个有效的例子:http://jsfiddle.net/juandopazo/H2ASR/2/