鼠标点击改变分页浏览式润乾报表的行的背景色

时间：2022-03-03 12:49:47

有时候客户为了尽可能的避免对行数很多的报表出现误读现象，写js来实现一个功能：鼠标的焦点位于该行的时候，改变该行的背景色。但是有时候如果报表分页了之后，发现第二页的行的背景色不仅没有改变，还会报脚本错误。

下面我介绍一个比较通用的js，即在报表分页或者不分页的时候都能改变行的背景色。

Js定义如下：

function changeColor(selColor){

            var getColor = selColor;

            var intColor = parseInt(getColor);

            //设置行背景色

            var pn=report1_getCurrPage();

            var n=(pn-1)*20;

            var colLen = document.getElementById("report1").rows[intColor-n-1].cells.length;

            for(var i=0;i<colLen;i++){

                document.getElementById("report1").rows[intColor-n-1].cells[i].style.backgroundColor="pink";

          

            }

   }

 

      function changeColor1(selColor){

            var getColor = selColor;

            var intColor = parseInt(getColor);

                var pn=report1_getCurrPage();

            var n=(pn-1)*20;

            //设置行背景色

            var colLen = document.getElementById("report1").rows[intColor-1-n].cells.length;

            for(var i=0;i<colLen;i++){

                document.getElementById("report1").rows[intColor-1-n].cells[i].style.backgroundColor="white";

            }

   }

然后定义一张报表，如下图：

鼠标点击改变分页浏览式润乾报表的行的背景色

然后设置报表“按行分页”，每页20行。

选中A1这一整行，在右边属性栏中找到“HTML事件”，在其表达式中写：

"onMouseMove=changeColor("+row()+") onMouseOut=changeColor1("+row()+")"

将行号传给changeColor（selColor）和changeColor1（selColor）。

浏览报表如下图：

第一页：

鼠标点击改变分页浏览式润乾报表的行的背景色

第二页：

鼠标点击改变分页浏览式润乾报表的行的背景色

第三页：

鼠标点击改变分页浏览式润乾报表的行的背景色

随便将鼠标放到一行，则该行的背景色变成粉红色。这样的话就很难看错，出现误读数据的情况了。

注意：不要将HTML事件中的onMouseMove改成onMouseOver，因为报表的单元格在初始化的时候就已经有了一个onmouseover=”report1416542over()”，如果用onMouseOver则会冲突，导致某些行的背景色不能快速灵活的改变，而是要通过反复的改变鼠标焦点才能改变。

这个js方法对于不分页的报表也是有效果的：

鼠标点击改变分页浏览式润乾报表的行的背景色

标签：

相关文章