【表单JS实例】报表块中点击单元格改变颜色再次点击恢复颜色

我是社区第485122位番薯,欢迎点我头像关注我哦~
1. 描述
1.1 问题描述

在报表块中,点击单元格背景色发生变化,再次点击单元格背景色恢复。


1.2 解决思路

但这些方案解决不了单元格颜色的恢复。对报表块添加初始化事件,使用 setTimeOut函数来定义单击事件,其中分别设置点击单元格后的背景色和恢复的背景色,根据点击时单元格的颜色决定设置背景色。

2. 示例
2.1 报表设计

1)新建决策报表,新建数据集 ds1:select * from 销量。

2)在决策报表中拖入一个报表块,报表块设计如下:

2.2 添加初始化后事件

给报表块添加初始化后事件,如下图所示:

JS 代码如下:

  1. setTimeout(function() {
  2.     //选择时背景颜色变量  
  3.     var oldColor = "rgb(255, 255, 255)";
  4.     var newColor = "rgb(255, 0, 0)";
  5.     $('.x-table td').click(function() {
  6.         if($(this).css('background-color') != newColor) {
  7.             $(this).css('background', newColor);
  8.         } else if($(this).css('background-color') == newColor) {
  9.             $(this).css('background', oldColor);
  10.         }
  11.     });
  12. }, 1000);
复制代码

如果想要保留一行颜色,具体 JS 代码如下:

  1. setTimeout(function() {
  2.     //选择时背景颜色变量  
  3.     var oldColor = "rgb(255, 255, 255)";
  4.     var newColor = "rgb(255, 0, 0)";
  5.     $('.x-table td').click(function() {
  6.         $(this).css('background', newColor).siblings().css("background",oldColor);
  7.     });
  8. }, 1000);
复制代码
3. 预览效果

保存模板,点击预览,效果如下图所示:


注:不支持移动端。

4. 已完成模板

已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\05-报表块中点击单元格改变颜色再次点击恢复颜色.frm

模板下载见附件


编辑于 2020-12-29 17:16  

发表于 2022-8-31 17:09:10
你好,怎么整行变色
发表于 2023-2-14 17:28:59
同问整行变色~~
发表于 2023-10-27 13:54:59
FR升级新自适应后,JS代码不起作用
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

3回帖数 1关注人数 11933浏览人数
最后回复于:2023-10-27 13:54

返回顶部 返回列表