1. 概述
1.1 问题描述场景描述:当我们数据填报时,有时候需呀鼠标选定复选框控件后,整行的数据变色。如下所示: 1.2 实现思路我们需要在选择控件时,确定选择的控件 CSS 样式发生改变。
2. 示例
2.1 打开报表
打开报表%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Form\LineForm\LineForm9 将报表的“填报当前行背景设置”去掉,如下图: 2.2 修改报表首先将 A4 单元格绑定的数据列设为列表形式,然后右击单元格选择控件设置,类型选择复选框控件,点击事件编辑,添加“状态改变”事件,选择"JavaScript 脚本",在参数栏中添加参数 row,值选择公式,为 row()-1, 在 JavaScript 脚本栏中输入代码: - if(this.getValue()){
- $('tr[tridx='+row+']').css('background','#ff0000')
- }
- else{
- $('tr[tridx='+row+']').css('background','#ffffff')
- }
复制代码如下图所示: 注:若想改变字体的颜色,只需将代码中的'background'改为'color'就可以了。
2.3 预览效果保存后,点击填报预览,点击按钮,效果如下图所示: 注:经过测试,手机端和 H5 不支持该效果。 3. 模板下载模板效果在线查看请点击:JS 实现改变复选框选中行背景色.cpt 已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\08-JS实现改变复选框选中行背景色.cpt 点击下载模板:08-JS实现改变复选框选中行背景色.cpt
编辑于 2020-12-7 13:51
|