泰安
精通报表制作，可提供专业咨询、技术支持及解决方案。熟悉Java开发及常见数据库，了解各种J2EE web容器
6 回帖  •  965 浏览  • 
     ...

鼠标移入报表时高亮显示所在行（支持分页报表）

 
润乾报表(31)

描述

在 鼠标移入报表时高亮显示所在行 中已经介绍了高亮的方法，但是当报表出现分页后，第二页开始就失效了，该篇文章针对出现分页的情况说下改进方法。

分析原因的话，链接中文章传给 js 的是行号，但是报表分页后，每页想对独立，比如每页 20 行，当传行号为 40（报表的 row() 函数是去整个报表的行号，即相当于不分页情况下）的行去高亮，实际在前端的 html 脚本中是找不到的，因此我们只能改成分页后针对当前页操作，包括每页行数不一致的情况。

方法是：根据当前页上鼠标滑过的单元格 id，找到对应的行号，然后对整行做背景色修改。

注：如果报表只有一页， 鼠标移入报表时高亮显示所在行 中的方法依然可用。

具体实现

示例下载：鼠标移入高亮行.zip

1、在展现报表的 jsp 添加如下 js 代码（body 前一行即可）：

<script language="javascript">

function changeColor(cell){
 //根据当前页上鼠标滑过的单元格id，找到对应的行号
 var rowNum = cell.id.split("_")[1].replace(/[^0-9]/ig,"");
 //设置行背景色
 var colLen = document.getElementById("report1").rows[rowNum-1].cells.length;
 for(var i=0;i<colLen;i++){
 document.getElementById("report1").rows[rowNum-1].cells[i].style.backgroundColor="red";
 }
 }
 function changeColor1(cell){
 //根据当前页上鼠标滑过的单元格id，找到对应的行号
 var rowNum = cell.id.split("_")[1].replace(/[^0-9]/ig,"");
 //设置行背景色
 var colLen = document.getElementById("report1").rows[rowNum-1].cells.length;
 for(var i=0;i<colLen;i++){
 document.getElementById("report1").rows[rowNum-1].cells[i].style.backgroundColor="white";
 }
 }
</script>

2、报表的发布标签内添加 generateCellId=“yes”
用于 Html 脚本内生成每个格子的 id 属性，如下

imagepng

3、报表单元格添加 html 事件

imagepng

如上图所示报表，进行的操作是：
选中 A5 行，设置 html 事件值为：

onMouseMove=changeColor(this) onMouseOut=changeColor1(this)

4、效果图

gif

当鼠标移入时，该行数据的背景色会显示为红色，移出会显示为白色，支持分页。

润乾报表(31)