1.1 问题描述

1）报表预览时，希望鼠标悬浮在表格上时，可以实现同时改变多行背景色，即以多行为一组来改变背景色。

2）可以自定义是否改变标题行的背景色。

1.2 实现思路

在分页预览设置界面添加 JS 加载结束事件，定义两个参数title_count和row_count，前者为不变色的标题行数，后者为每几行变色。

1.3 功能介绍

以除标题行外每三行改变背景色为例，效果如下图所示：

2.1 报表设计

1）打开%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\NewbieGuide\行式报表.cpt

2）如下图给打开的行式报表添加一个分页预览加载结束事件。

3）事件设置界面需要添加两个值为整型的参数title_count和row_count。

title_count：用于定义标题行不变色，设置为 n，则报表预览时鼠标悬浮在前 n 行，前 n 行不会变色。

row_count：用于定义每几行变色，设置为 n，则除标题行外，每 n 行同时变色。

加载结束事件的 JS 代码如下：

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.2 效果预览

报表的展示效果如功能介绍中所示。

2.3 报表块设置

如果是决策报表中的报表块的话，需要给报表块添加初始化后事件，代码如下：

注1：需要根据实际场景如下图修改对应的报表块名称。报表块名称代码中有2处，一定都要改，否则会出错。

注2：想要实现效果要确保此报表块 A 列的所有单元格不与其他单元格有合并操作，可以空出 A 列并设置条件隐藏列宽。

注3：决策报表中会有较大延时，如果数据查询较慢需要相应增加延时的时间。

setTimeout(function() {
var move_color='#f0e229';//鼠标悬浮的颜色
var out_color='#FFFFFF';//鼠标离开的颜色
// REPORT0 为 frm 中需要变色的报表块
$(".REPORT0table td").mousemove(function() {  
    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);
}
}
}); 
//下同上
$(".REPORT0table 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);
}
}
}); 
}, 3000);

已完成模板可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\JS实现鼠标悬浮同时改变多行背景色.cpt

点击下载模板：JS实现鼠标悬浮同时改变多行背景色.cpt