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

  • 文档创建者:cherishdqy
  • 编辑次数:12次
  • 最近更新:Kevin-s 于 2019-11-20
  • 1. 概述

    1.1 问题描述

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

    222


    1.2 实现思路

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

    2. 示例

    2.1 打开报表

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


    2.2 修改报表

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

    222


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

    image.png

    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 列。


    2.3 预览效果

    保存模板,点击填报预览,PC 端效果如下所示:

    222

    注:此 JS 不支持移动端使用


    3. 模板下载

    模板效果在线查看请点击:JS 实现改变复选框选中行中指定单元格背景色.cpt

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

    点击下载模板:29-JS实现改变复选框选中行中指定单元格背景色.cpt


    附件列表


    主题: 二次开发
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!