JS实现切换tab显示/隐藏参数面板上的控件_树形控件 切换多个参数面板

JS实现切换tab显示/隐藏参数面板上的控件

 

目录:

• 1. 描述
• 2. 思路
• 3. 操作步骤
• 4. 预览效果
• 5. 已完成模板

1. 描述编辑

 

 

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

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

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

 

2. 思路编辑

 

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

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

 

3. 操作步骤编辑

 

下面举一个简单的例子详细介绍下该方法：

 

3.1 新建报表

 

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

 

3.2 报表设计

 

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

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

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

 

4）这里要实现“运货商控件”在点击第二个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);  

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

3.3 保存预览

 

保存模板，点击预览，效果如上图。

 

4. 预览效果编辑

 

 

4.1 PC端预览效果

 

 

4.2 移动端预览效果

 

注：不支持移动端。

 

5. 已完成模板编辑

 

模板效果在线查看请点击：JS实现切换tab显示或隐藏参数面板上的控件.frm

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

右击存储模板