JS实现改变当前选中单元格的背景色,离开后恢复原色

  • 文档创建者:yets11
  • 编辑次数:12次
  • 最近更新:Carly 于 2020-01-13
  • 1. 概述

    1.1 预期效果

    通过 JS 函数,可以实现改变鼠标所在行的颜色,具体使用请参见 JS 实现分页预览改变鼠标所在行的颜色

    在报表制作中,有时为了突出当前选中的单元格,需要突出一下背景色,而在鼠标离开后恢复原有的背景色。如下图所示:

    1578896268451039.gif

    1.2 实现思路

    通过设置加载结束事件即可实现此效果。

    2. 示例

    2.1 模板设计

    打开模板%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Form\LineForm\LineForm.cpt

    为了验证方法的通用性,将 C3 单元格背景色设置成#FFCC00,D3 单元格背景色设置为#CC99FF,设置方法请参见 报表的设计与配色技巧 。如下图所示:

    222

    2.2 设置加载结束事件

    点击 模板>模板 Web 属性>填报页面设置,选择为该模板单独设置,取消勾选填报当前编辑行背景设置,添加一个加载结束事件,如下图所示:

    1578897086434693.png

    注:不能同时改变当前编辑行背景色单元格背景色,会有冲突,在实际使用中根据需要选择使用一种。

    JavaScript 代码如下:

    var $lasttd;//上一个单元格变量
    var lastcolor;//上一次颜色变量
    $('.x-table td').click(function(){
    if($lasttd){
    $lasttd.css('background',lastcolor);
    }//离开后原单元格恢复原色
    lastcolor=$(this).css('background-color');
    if(!lastcolor)
    lastcolor=$(this).css('background');//保存原始颜色
    $(this).css('background','red');//设置当前单元格为红色
    $lasttd=$(this);//保存上一个单元格
    });

    2.3 预览效果

    保存模板,选择填报预览,实现效果如1.1 预期效果所示。

    注1:此方法适用于分析预览,需要在模板>模板 Web 事件>数据分析预览设置中增加加载结束事件,代码相同。

    注2:不支持移动端。

    3. 模板下载

    已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\21-JS实现改变当前选中单元格的背景色,离开后恢复原色.cpt

    点击下载模板:21-JS实现改变当前选中单元格的背景色,离开后恢复原色.cpt

    附件列表


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