1. 概述
1.1 问题描述
在设计决策报表时，可能会遇到这样的需求：当鼠标滑过报表块单元格时，添加不同的显示效果。
但由于决策报表的特殊性，不能像 普通 CPT 报表 通过添加加载结束事件来实现。这时，我们该如何来实现此功能呢？如下图所示：
1.2 解决思路
通过 JS 实现鼠标经过或点击指定行时改变该行的样式。
注：如果预览模板不生效，将 setTimeout 的延时时间调大点就行，比如将 100 改成 500。
2. 示例一：改变单元格样式
2.1 新建模板
新建决策报表，添加数据库查询，SQL 语句为：SELECT * FROM 区域销售
添加报表块 report0 ，样式如下图所示：
2.2 添加初始化后事件
选中 report0 ，点击控件设置，添加初始化后事件，如下图所示：
JS 代码如下：
setTimeout(function() {
//鼠标经过时
$(".x-table.REPORT0table td span.linkspan").mousemove(function() {
//所在单元格字体颜色为红色
$(this).css("color", "red");
//所在单元格背景为蓝色
$(this).css("background-color", "blue");
//所在单元格字体加粗
$(this).css("font-weight", "bold");
//所在单元格添加下划线
$(this).css("text-decoration", "underline");
//所在行单元格字体:11px
$(this).find("td").css("font-size", "11px");
});
//鼠标点击时
$(".x-table.REPORT0table td span.linkspan").mousedown(function() {
//所在单元格字体颜色为黄色
$(this).css("color", "yellow");
//所在单元格背景为黑色
$(this).css("background-color", "black");
//所在单元格字体加粗
$(this).css("font-weight", "bold");
//所在单元格添加上划线
$(this).css("text-decoration", "overline");
//所在行单元格字体:13px
$(this).find("td").css("font-size", "13px");
});
//鼠标离开
$(".x-table.REPORT0table td span.linkspan").mouseout(function() {
//所在单元格字体颜色为黑色
$(this).css("color", "black");
//所在单元格背景为白色
$(this).css("background-color", "white");
//所在单元格字体正常
$(this).css("font-weight", "normal");
//所在单元格无下划线
$(this).css("text-decoration", "none");
//所在行单元格字体:9px
$(this).find("td").css("font-size", "9px");
});
}, 100);
2.3 模板预览
保存模板，预览效果如下图所示：
注：不支持移动端
