页面树结构
转至元数据结尾
转至元数据起始

示例说明

在交互仪表盘中新增宏代码,变化筛选器的值时自动切换Tab:

版本及客户端说明

1.smartbi版本:V11

2.客户端:PC

3.浏览器:IE11、谷歌浏览器(Chrome)、火狐浏览器(Firefox)

设置方法

  1. 准备好要修改的交互仪表盘
类型对象事件
ClientSide(客户端宏)具体的组件onAfterRender

该宏的作用为变化筛选器的值时,自动切换Tab:

宏代码
/******************************宏代码说明******************************
 * version:Smartbi V11
 * 类型:ClientSide
 * 对象:具体组件
 * 事件:onAfterRender
 * 效果描述:变化筛选器的值时自动切换Tab
 * 是否可修改:是
 *********************************************************************/
function main(page: IPage, portlet: IFilterPortlet) {
    portlet.setFilterValueChangeHandler(function (value: Array) {
        // tab控件的标题
        let stringArray: string[] = [
            'Tab_饼图',         
            'Tab_柱图'
        ];
        stringArray.forEach((tabTitle) => {
            // 查找对应的tab控件
            let tabPortletArray = page.getPortletsByTitle(tabTitle);
            if (tabPortletArray && tabPortletArray.length > 0) {
                let tabPortlet: IStaticTabsPortlet = tabPortletArray[0];
                if (value && value[0] == "华北") {
                    tabPortlet.setActiveTabName('0');
                } else {
                    tabPortlet.setActiveTabName('1');
                }
            }
        });
    });
}

配置说明:

  • stringArray:填写需要被动态切换的Tab组件的组件标题。
  • 宏示例中的“华北”和页签序号,用户可根据实际筛选器的值以及需要动态切换的Tab页签修改。

4. 配置完成后进行保存即可。

示例资源

在线访问资源:示例资源

导出资源:值变化时切换下方的Tab控件.xml


  • 无标签