【参数界面JS实例】JS实现参数面板Tab切换按钮

1. 概述
1.1 预期效果

在参数面板中实现可切换的 Tab 按钮，点击这些按钮可以切换数据查询结果，效果如下图所示：

1.2 实现思路

通过 label 标签画出一个一个 Tab 块；

通过 JS 实现点击 label 给某个文本框赋值（隐藏不可见）；

赋值变化后进行查询。

2. 示例
2.1 准备数据

新建普通报表，新建数据查询数据集 ds1，SQL 语句为：

1. select
   
2. 
   
3. case
   
4. 
   
5. when '${wbk}'= '0' then "第一个"
   
6. 
   
7. when '${wbk}' = '1' then "第二个"
   
8. 
   
9. when '${wbk}' = '2' then "第三个"
   
10. 
    
11. when '${wbk}' = '3' then "第四个"
    
12. 
    
13. when '${wbk}' = '4' then "第五个"
    
14. 
    
15. when '${wbk}' = '5' then "第六个"
    
16. 
    
17. else null end  as 结果

复制代码

2.2 设计表格

设计简单的表格，参数面板拖入 6 个 label 控件，分别命名为 label0~lable5 ，控件值分别写入1~6。

再拖入一个文本框控件，默认不可见，命名为 wbk，控件值写入 1，如下图所示：

2.3 添加事件

给参数面板添加初始化后事件，如下图所示：

JavaScript 代码如下：

1. timer = setInterval(function() {
   
2.         if ($("[widgetname^='LABEL']")) {
   
3.                 clearInterval(timer);
   
4.         } //1.替代延迟加载setTimeout()方法，用定时器的方式来实现，当label元素出现则清除定时器，否则每隔15ms执行代码
   
5.         $("[widgetname^='LABEL']").css({
   
6.                 "border": "1px solid #e8ebf1"
   
7.         })//2.给LABEL0~LABEL5加边框
   
8.         $("[widgetname^='LABEL']:first").css({
   
9.                 "borderRadius": "4px 0 0 4px"
   
10.         })//3.给LABEL0(第一个label)加左边圆角
    
11.         $("[widgetname^='LABEL']:last").css({
    
12.                 "borderRadius": "0 4px 4px 0"
    
13.         })//4.给LABEL5(最后一个label)加右边圆角
    
14.         $("[widgetname^='LABEL']").find("td .fr-label").css({
    
15.                 "color": "#555555",
    
16.         })//5.给LABEL0~LABEL5设置字色，直接在注释第2步中加color是不行的
    
17. 
    
18.         var num = "";
    
19.         $("[widgetname^='LABEL']").click(function() {
    
20.                 $(this).css({
    
21.                         border: "1px solid #1890ff",
    
22.                         backgroundColor: "#1890ff"
    
23.                 }).siblings().css({
    
24.                         border: "1px solid #e8ebf1",
    
25.                         backgroundColor: "transparent"
    
26. 
    
27.                 })//6.给点击的LABEL加边框和背景样式，其他兄弟LABEL加另外一种边框和背景样式
    
28.                 num = $(this).attr("widgetname").replace("LABEL", "");
    
29.                 $("[widgetname^='LABEL'] td .fr-label").css({
    
30.                         "color": "#555555"
    
31.                 });//7.给所有LABEL字色设置样式
    
32.                 $("[widgetname^='LABEL'] td .fr-label").eq(num).css({
    
33.                         "color": "white"
    
34.                 });//8.给点击了的LABEL设置另一个字体颜色;不用$("this").sibings()方式
    
35.                 var a = _g().parameterEl.getWidgetByName("wbk").getValue(); //获取文本框的
    
36.                 var b = _g().parameterEl.getWidgetByName("wbk").setValue(num);//给文本框赋值
    
37.                 if (b !== a) {
    
38.                         _g().parameterCommit();
    
39.                 }//如果文本框的值和上次不同，则进行查询操作
    
40.         })
    
41. 
    
42. }, 15)

复制代码

2.4 效果预览

保存模板，点击分页预览，效果如下图所示：

注：不支持移动端。

3. 模板下载

已完成模板可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\参数界面JS实例\JS实现参数面板Tab切换按钮.cpt

模板见附件

参数面板可以自动轮播吗

我搞了一个比你这个还直接的办法