1. 概述
1.1 预期效果
1）报表预览时，希望鼠标悬浮在表格上时，可以实现同时改变多行背景色，即以多行为一组来改变背景色。
2）可以自定义是否改变标题行的背景色。
以除标题行外每三行改变背景色为例，效果如下图所示：
1.2 实现思路
注：此方案不支持冻结列。
在分页预览设置界面添加 JS 加载结束事件，定义两个参数title_count和row_count，前者为不变色的标题行数，后者为每几行变色。
2. 示例
2.1 准备模板
打开%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\NewbieGuide\行式报表.cpt
2.2 添加 JS 事件
1）如下图给打开的行式报表添加一个「分页预览>加载结束」事件。
2）事件设置界面需要添加两个值为整型的参数title_count和row_count。
title_count：用于定义标题行不变色，设置为 n，则报表预览时鼠标悬浮在前 n 行，前 n 行不会变色。
row_count：用于定义每几行变色，设置为 n，则除标题行外，每 n 行同时变色。
JavaScript 代码如下：
setTimeout(function() {
var move_color='#f0e229';//鼠标悬浮的颜色
var out_color='#FFFFFF';//鼠标离开的颜色
// .x-table td 为 cpt 模板格式
$(".x-table td").mousemove(function() {
//alert('212');
var titlecount = title_count; //标题行
var rowcount = row_count; //变色行数
var id = $(this).attr("id"); //单元格id
var num=id.search("-"); //获取id中“-”符号第一次出现的索引
var id1=id.substr(0,num).replace(/[^0-9]+/ig,""); //截取id值中的行号
var id2=id.substr(num,id.length-num); //截取id
var flag = Math.ceil((id1-titlecount) / rowcount); //判断所指行第几组
//计算起始行
var rowstart = (flag-1)*rowcount + 1+titlecount;
//计算结尾行
var rowend = flag * rowcount + titlecount;
//标题行不变色和所指行第几组判定
if(id1>titlecount){
for(var i = rowstart;i<=rowend;i++){
var col1 = "A"+i+id2;
$('td[id^='+col1+']').parent('tr').find("td").css('background-color',move_color);
}
}
});
//下同上
$(".x-table td").mouseout(function() {
var rowcount = row_count;
var titlecount = title_count;
var id = $(this).attr("id");
var num=id.search("-"); //获取id中“-”符号第一次出现的索引
var id1=id.substr(0,num).replace(/[^0-9]+/ig,""); //截取id值中的行号
var id2=id.substr(num,id.length-num); //截取id
var b = "A";
// alert(b);
var flag = Math.ceil((id1-titlecount) / rowcount);
//计算起始行
var rowstart = (flag-1)*rowcount + 1 + titlecount;
//计算结尾行
var rowend = flag * rowcount + titlecount;
if(id1>titlecount){
for(var i = rowstart;i<=rowend;i++){
var col1 = "A"+i+id2;
$('td[id^='+col1+']').parent('tr').find("td").css('background-color',out_color);
}
}
});
}, 100);注：想要实现效果要确保此报表 A 列的所有单元格不与其他单元格有合并操作，可以空出 A 列并设置条件隐藏列宽。
2.3 效果预览
保存报表，点击「分页预览」，效果如 1.1 节所示。
注：不支持移动端
3. 模板下载
已完成模板可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\JS实现鼠标悬浮同时改变多行背景色.cpt
点击下载模板：JS实现鼠标悬浮同时改变多行背景色.cpt
