JS实现改变复选框选中行中指定单元格背景色

编辑
文档创建者:cherishdqy (66470 )     浏览次数:2204次     编辑次数:8次     最近更新:jiangsr 于 2018-05-31     

目录:

1. 描述编辑

数据填报时,当鼠标选定复选框控件后,改变选中行的指定单元格的背景色。

222

2. 思路编辑

给复选框控件添加状态改变事件来改变被选中行的指定单元格的背景色

3. 操作步骤编辑

3.1 打开报表

打开报表%FR_HOME%\WebReport\WEB-INF\reportlets\doc\Form\LineForm\LineForm7.cpt

3.2 修改报表

右键A3单元格,清除内容,设置A3单元格的左父格为B3。

222

右键A3单元格选择控件设置,控件类型选择复选框控件,点击事件编辑,添加“状态改变”事件,在JavaScript脚本框的参数栏中添加参数row,值选择公式,为ROW(),如下图所示:

222

JS代码:

var value = this.getValue(); if(value) { $('td[id^=H'+row+'-0-0]').css({'background-color':'yellow'}); } if(!value) { $('td[id^=H'+row+'-0-0]').css({'background-color':'white'}); }

代码解释:

if(value){$('td[id^=H'+row+'-0-0]').css({'background-color':'yellow'});}  //当复选框被勾选时,当前行的H列单元格的背景色变成黄色

if(!value){$('td[id^=H'+row+'-0-0]').css({'background-color':'white'});}//当复选框没有被勾选时,当前行的H列单元格的背景色变成白色

注:当报表中有横向扩展的数据列时,js中$('td[id^=H'+row+'-0-0]')的H为报表预览时扩展后的H列,并非是设计器中的H列。

4. 预览效果编辑

4.1 PC端预览效果
222

4.2 移动端预览效果
注:此JS不支持移动端使用

5. 已完成模板编辑

已完成的模板,可参见:%FR_HOME%\WebReport\WEB-INF\reportlets\doc\JS\填报预览JS实例\29-JS实现改变复选框选中行中指定单元格背景色.cpt


附件列表


主题: 二次开发
如果您认为本文档还有待完善,请编辑

文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

此页面有帮助吗?