【表单JS实例】JS实现切换tab显示/隐藏参数面板上的控件

1. 概述
1.1 问题描述

页签式报表的需求，即需要点击某页签时，参数面板中的部分参数隐藏。

• 点击标题 1，只出现订单 ID 参数：

  
  

• 点击标题0，同时出现订单ID和运货商参数：

  
  

1.2 解决思路

在 body 组件上添加初始化后事件，在 JS 中使用 setTimeout 函数来监听页签的事件状态，因为无法获取页签。

所以这里通过 jQuery  类名选择器，我们利用 eq 选择到我们的页签控件 绑定 click 事件。

2. 示例
2.1 添加数据集

选择文件>新建决策报表，添加数据集 ds1: SELECT * FROM S订单

2.2 添加参数

1）点击模板>模板参数，新增两个参数，分别命名为订单 ID 和运货商，如下图所示：

2）将参数面板拖入报表主体，点击参数面板空白处，在设计器右侧的控件设置中，点击全部添加：

2.3 添加 Tab 标签

将 Tab 块拖入报表主体，并新增一个 Tab 标签页：

2.4 添加初始化后事件

1）这里要实现运货商控件在点击第二个 Tab 标签页时隐藏，点击第一个 Tab 标签页时出现。

右上角选中 body 控件，添加一个初始化后事件：

JS 代码如下：

1. setTimeout(function() {
   
2.     $(".fr-widget-click").eq(2).bind("click", function() {
   
3.         $("div[widgetname$='运货商']").show();
   
4.     });
   
5.     $(".fr-widget-click").eq(3).bind("click", function() {
   
6.         $("div[widgetname$='运货商']").hide();
   
7.     });
   
8. }, 100);

复制代码

注：若控件名为英文名，则需要大写，否则不能识别。

2) 对于使用其他样式模板的 tabpane ，上面的方式不再适用，因为其他样式模板使用 canvas 绘制，没有对应的 dom 元素，可以使用以下方案替代

在 tabpane 上添加tab切换事件，如下所示：

JS 代码如下：

1. var tabpane = this.getWidgetByName("TABPANE0");
   
2. switch(tabpane.mouseInTab){
   
3.         case 0:        
   
4.         $("div[widgetname$='运货商']").show();
   
5.         break;        
   
6.         case 1:        
   
7.         $("div[widgetname$='运货商']").hide();        
   
8.         break;        
   
9.         default:        
   
10.         break;        
    
11. }

复制代码

3. 预览效果

PC 端预览效果如下图所示

注：不支持移动端。

4. 已完成模板

已完成模板请参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\22-JS实现切换tab显示或隐藏参数面板上的控件.frm

模板下载见附件

非常好 ，吸取一下经验

按照这个方案实现有个问题，就是在不查询的情况下，切换tab是可以正确显示、隐藏对应的控件的。但是一旦使用了控件并查询，设置的显示、隐藏就失效了，怎么切换tab都只停留在查询时的控件显示。大家有遇到这个情况么？有什么好的解决思路么？

在上一级 TABLAYOUT0 设置点击事件，根据当前页签的序号，第一个序号是0，第二个是1，以此类推，代码如下
var change = _g().getWidgetByName("tabpane1").getShowIndex();
if(change !=0){
    $("div[widgetname$='运货商']").hide();
}
else {
    $("div[widgetname$='运货商']").show();
}
我自己用没有出现你说的问题，你用用看，是不是还有你说的问题