JS实现多TAB同步切换

1.1 预期效果

在决策报表中有多个TAB块时，希望实现TAB块的同步切换，如下图所示：

切换左侧TAB块时，右侧TAB块自动同步切换。

1.2 实现思路

通过getShowIndex()获取TAB切换后当前TAB块的标题索引，进而同步切换另一个TAB块。

2.1 报表设计

1）点击设计器左上角「文件>新建决策报表」，拖入两个TAB块，左右排列

2）双击TAB块，添加两个TAB页，给TAB页设计好标题，拖入报表块，此处简单的以文字进行区分，具体设计按需求变化。

2.2 添加事件

选中左侧 TAB 块的标题面板 tabpane0 ，添加一个「Tab块切换」事件。输入 JavaScript 代码如下：

setTimeout(function()
{ //TAB切换后,获取到当前TAB块的标题索引
     FR.IndexNum=_g().getWidgetByName("tabpane0").getShowIndex(); 
     console.log(FR.IndexNum);
     _g().getWidgetByName("tabpane1").showCardByIndex(FR.IndexNum);
},100);

如下图所示：

2.3 效果预览

1）PC端

保存模板，点击「PC端预览」，效果如 1.1 节预期效果所示。

2）移动端

App 端及 HTML5 端效果如下图所示：

点击下载模板：JS实现多TAB同步切换.frm