【表单JS实例】JS实现决策报表报表块鼠标所在单元格/行的样式

1. 概述
1.1 问题描述

在设计决策报表时，可能会遇到这样的需求：当鼠标滑过报表块单元格时，添加不同的显示效果。

但由于决策报表的特殊性，不能像 普通 CPT 报表 通过添加加载结束事件来实现。这时，我们该如何来实现此功能呢？如下图所示：

1.2 解决思路

通过 JS 实现鼠标经过或点击指定行时改变该行的样式。

注：如果预览模板不生效，将 setTimeout 的延时时间调大点就行，比如将 100 改成 500。

2. 示例一：改变单元格样式2.1 新建模板

新建决策报表，添加数据库查询，SQL 语句为：SELECT * FROM S产品

添加报表块 report0 ，样式如下图所示：

2.2 添加初始化后事件

选中 report0 ，点击控件设置，添加初始化后事件，如下图所示：

JS 代码如下：

1. setTimeout(function() {
   
2. //鼠标经过时
   
3. $(".x-table.REPORT0table td").mousemove(function() {
   
4. //所在单元格字体颜色为红色
   
5. $(this).css("color", "red");
   
6. //所在单元格背景为蓝色
   
7. $(this).css("background-color", "blue");
   
8. //所在单元格字体加粗
   
9. $(this).css("font-weight", "bold");
   
10. //所在单元格添加下划线
    
11. $(this).css("text-decoration", "underline");
    
12. //所在行单元格字体:11px  
    
13. $(this).find("td").css("font-size", "11px");
    
14. });
    
15. //鼠标点击时
    
16. $(".x-table.REPORT0table td").mousedown(function() {
    
17. //所在单元格字体颜色为黄色
    
18. $(this).css("color", "yellow");
    
19. //所在单元格背景为黑色
    
20. $(this).css("background-color", "black");
    
21. //所在单元格字体加粗
    
22. $(this).css("font-weight", "bold");
    
23. //所在单元格添加上划线
    
24. $(this).css("text-decoration", "overline");
    
25. //所在行单元格字体:13px  
    
26. $(this).find("td").css("font-size", "13px");
    
27. });
    
28. //鼠标离开
    
29. $(".x-table.REPORT0table td").mouseout(function() {
    
30. //所在单元格字体颜色为黑色
    
31. $(this).css("color", "black");
    
32. //所在单元格背景为白色
    
33. $(this).css("background-color", "white");
    
34. //所在单元格字体正常
    
35. $(this).css("font-weight", "normal");
    
36. //所在单元格无下划线
    
37. $(this).css("text-decoration", "none");
    
38. //所在行单元格字体:9px  
    
39. $(this).find("td").css("font-size", "9px");
    
40. });
    
41. }, 100);

复制代码

2.3 模板预览

保存模板，预览效果如下图所示：

3. 示例二：改变行样式
3.1 新建模板

新建决策报表，添加数据库查询，SQL 语句为：SELECT * FROM S产品

添加报表块 report1 ，样式如下图所示：

3.2 添加初始化后事件

选中 report1 ，点击控件设置，添加初始化后事件，如下图所示：

JS 代码如下：

1. setTimeout(function() {
   
2. //鼠标经过时
   
3. $(".x-table.REPORT1table tr").mousemove(function() {
   
4. //单元格所在行字体颜色为红色
   
5. $(this).css("color", "red");
   
6. //单元格所在行背景为蓝色
   
7. $(this).css("background-color", "blue");
   
8. //单元格所在行字体加粗
   
9. $(this).css("font-weight", "bold");
   
10. //单元格所在行添加下划线
    
11. $(this).css("text-decoration", "underline");
    
12. //单元格所在行字体:11px  
    
13. $(this).find("td").css("font-size", "11px");
    
14. });
    
15. //鼠标点击时
    
16. $(".x-table.REPORT1table tr").mousedown(function() {
    
17. //单元格所在行颜色为黄色
    
18. $(this).css("color", "yellow");
    
19. //单元格所在行背景为黑色
    
20. $(this).css("background-color", "black");
    
21. //单元格所在行字体加粗
    
22. $(this).css("font-weight", "bold");
    
23. //单元格所在行添加上划线
    
24. $(this).css("text-decoration", "overline");
    
25. //单元格所在行字体:13px  
    
26. $(this).find("td").css("font-size", "13px");
    
27. });
    
28. //鼠标离开
    
29. $(".x-table.REPORT1table tr").mouseout(function() {
    
30. //单元格所在行字体颜色为黑色
    
31. $(this).css("color", "black");
    
32. //单元格所在行背景为白色
    
33. $(this).css("background-color", "white");
    
34. //单元格所在行字体正常
    
35. $(this).css("font-weight", "normal");
    
36. //单元格所在行无下划线
    
37. $(this).css("text-decoration", "none");
    
38. //单元格所在行字体:9px  
    
39. $(this).find("td").css("font-size", "9px");
    
40. });
    
41. }, 100);

复制代码

3.3 模板预览

保存模板，预览效果如下图所示：

4. 效果预览
4.1 示例一：改变单元格样式

4.2 示例二：改变行样式

注：不支持移动端

5. 已完成模板

已完成模板，可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\02-JS实现决策报表报表块鼠标所在单元格或行的样式.frm

模板下载见附件

注：如果预览模板不生效，将 setTimeout 的延时时间调大点就行，比如将 100 改成 500。

那能不能实现鼠标悬停改变整个报表块的样式呀？

没用，tab块里面没用

点一下当前单元格然后当前单元格一直变色，点击其他单元格时恢复已经变色的单元格。这种的怎么写呀

我做的咋没反应，我还是直接复制的代码