JS实现修改填报控件透明度

1. 概述

1.1 问题描述

在制作「填报报表」时，有时希望「控件」可见不可用。此时，如果直接对控件设置可见不可用，填报预览时页面对应控件单元格呈现「灰色」效果，但我们希望它没有置灰效果，该如何实现呢？如下图所示：

1.2 解决思路

参考文档 FineReport 控件的 CSS 样式 ，在「模板 Web 属性>填报页面设置」中添加「加载结束」事件，通过 JavaScript 代码可改变控件透明度。

2. 示例


2.1 数据准备

新建普通报表，新建数据库查询 ds1，SQL 查询语句为：SELECT * FROM 订单 limit 10。如下图所示：

2.2 报表设计

从 B 列开始输入数据，样式可自行设计，表格内容如下图所示：

2.3 控件设置

给 B2~D2 单元格添加「文本控件」， E2 单元格添加「单选按钮组控件」。单选按钮组控件设置如下：

1）取消勾选「可用」；

2）数据字典设置为「自定义」，实际值为 true 时显示值为是，实际值为 false 时显示值为否；

3）取消勾选「自适应」，展示列数设置为 2 。

2.4 添加加载结束事件

点击菜单栏「模板>模板 Web 属性」，选择「填报页面设置」，选择「为该模板单独设置」，在页面下方事件设置处添加「加载结束」事件，在弹出的事件设置框中输入 JavaScript 代码：

1. setTimeout(function() {$(".ui-state-disabled").css({'opacity':'1'});}, 500)

复制代码

代码重置控件的不透明度为 1，其中 opacity: value|inherit

值	说明
value	规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。
inherit	应该从父元素继承 opacity 属性的值。

如下图所示：

2.5 效果预览

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

注：不支持移动端。

3. 模板下载

已完成模板可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\JS实现修改填报控件透明度.cpt

点击下载模板： JS实现修改填报控件透明度.cpt (8.93 KB, 下载次数: 22)

2021-4-28 10:48 上传

点击文件名下载附件