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

我是社区第485122位番薯,欢迎点我头像关注我哦~
1. 概述
1.1 预期效果

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

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

1.2 实现思路

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

2. 示例

2.1 模板设计

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

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


2.2 设置加载结束事件

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

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

JavaScript 代码如下:

  1. var $lasttd;//上一个单元格变量
  2. var lastcolor;//上一次颜色变量
  3. $('.x-table td').click(function(){
  4. if($lasttd){
  5. $lasttd.css('background',lastcolor);
  6. }//离开后原单元格恢复原色
  7. lastcolor=$(this).css('background-color');
  8. if(!lastcolor)
  9. lastcolor=$(this).css('background');//保存原始颜色
  10. $(this).css('background','red');//设置当前单元格为红色
  11. $lasttd=$(this);//保存上一个单元格
  12. });
复制代码


2.3 预览效果

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

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

注2:不支持移动端。

3. 模板下载

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

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




编辑于 2020-12-3 18:28  

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

0回帖数 1关注人数 4988浏览人数
最后回复于:2020-12-3 18:28

返回顶部 返回列表