JS实现改变复选框选中行背景色

楼主
我是社区第485122位番薯,欢迎点我头像关注我哦~
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 脚本栏中输入代码:

  1. if(this.getValue()){   
  2. $('tr[tridx='+row+']').css('background','#ff0000')   
  3. }   
  4. else{   
  5. $('tr[tridx='+row+']').css('background','#ffffff')  
  6. }
复制代码

如下图所示:

注:若想改变字体的颜色,只需将代码中的'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  
分享扩散:

沙发
发表于 2023-8-1 11:54:10
请问复选框勾选后,我再次再进入如何保存复选框勾选的状态?
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

1回帖数 2关注人数 8075浏览人数
最后回复于:2023-8-1 11:54

返回顶部 返回列表