【表单JS实例】JS实现开关按钮

1. 概述
1.1 预期效果

实现开关按钮，前端预览打开和关闭按钮时，可以跟报表元素联动。例如按钮打开时显示单价列表，关闭时隐藏单价列表，点击禁用开关按钮可以让开关效果失效，如下图所示：

1.2 实现思路

• 如果是 cpt 报表，直接在模板 Web 属性中引入外部 JavaScript 文件。使用公式实现开关样式，添加点击事件实现开关切换效果。

• 如果是 frm 报表，需要在 body 初始化事件中写外部 JavaScript 引用。使用公式实现开关样式，添加点击事件实现开关切换效果。

  
  

2. 示例
2.1 下载文件

1）点击下载 JavaScript 文件：Qbutton.js

2）将下载的 JavaScript 文件放到%FR_HOME%\webroot\help\css目录下，如下图所示：

2.2 引用文件

新建决策报表，在 body 初始化事件中引入上面的 JavaScript 文件，如下图所示：

JavaScript 代码如下：

1. function dynamicLoadJs(url) {
   
2.     var oHead = document.getElementsByTagName('head').item(0);
   
3.     var oScript = document.createElement("script");
   
4.     oScript.type = "text/javascript";
   
5.     oScript.src = url;
   
6.     oHead.appendChild(oScript);
   
7. }
   
8. //封装的方法，无需任何改动
   
9. dynamicLoadJs("/webroot/help/css/Qbutton.js");
   
10. //调用方法，参数为js文件路径

复制代码

2.3 准备数据

新建数据查询数据集 ds1 ，SQL 查询语句为：SELECT * FROM S产品 limit 10

2.4 设计报表

1）决策报表 body 中拖入 3 个组件：报表块 report0 和 report1 ，按钮控件 button0，如下图所示：

2）编辑报表块 report0 ，设计表格样式，如下图所示：

3）编辑报表块 report1，设计表格样式，如下图所示：

其中，B1 单元格插入公式'<jelly-switch id="Qbutton" checked></jelly-switch>'，并用HTML显示内容，通过该公式获取开关的样式，如下图所示：

• 可选 checked 属性，控制开关按钮显示状态

• 可选 disabled 属性，控制开关按钮可用状态

  
  

4）选择按钮控件 button0，设置按钮名字为禁用开关按钮，如下图所示：

2.5 开关联动

body 新增一个初始化事件用于为开关按钮绑定点击事件，获取值并传参给需要联动的组件，切换显示和隐藏单价列，如下图所示：

JavaScript 代码如下：

1. setTimeout(function() {
   
2.         $("#Qbutton").click(function() {
   
3.                 //给开关按钮绑定点击事件
   
4.                 var state = this.checked;
   
5.                 //获取按钮值，返回true和false
   
6.                 _g().getWidgetByName("report0").gotoPage(1, "{checked:" + state + "}", true);
   
7.                 //传参并刷新报表块report0
   
8.                 if (state) {
   
9.                         $("#REPORT1 td[id^='A1']").text('显示单价');
   
10.                         $("#REPORT1 td[id^='A1']").css("color","#11c75d");
    
11.                 } else {
    
12.                         $("#REPORT1 td[id^='A1']").text('隐藏单价');
    
13.                         $("#REPORT1 td[id^='A1']").css("color","#FF4651");
    
14.                 }
    
15.                 //动态修改A1内容和字体颜色
    
16.         });
    
17. }, 500)

复制代码

2.6 禁用按钮

按钮控件 button0 添加点击事件，实现禁用按钮效果，如下图所示：

JavaScript 代码如下：

1. Qbutton.disabled = true;//开关按钮灰化无法选取

复制代码

2.7 效果预览

保存报表，点击表单预览，效果如下图所示：

注：不支持移动端。

3. 模板下载

已完成模板可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\JS实现开关按钮.frm

模板下载见附件

JavaScript 文件下载见附件

很需要这个功能，好像附件不能下载

应用场景是啥呢

附件不让下载，能隐藏行吗

赞~~~~

附件不让下载？

附件不让下载

JS文件下载不了请问如何解决

附件下载不了