鼠标点击改变分页浏览式润乾报表的行的背景色
2016-11-30 15:07
253 查看
有时候客户为了尽可能的避免对行数很多的报表出现误读现象,写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方法对于不分页的报表也是有效果的: |
相关文章推荐
- 鼠标指向表格中的一行时,该行背景色改变;点击行时,突出显示标记颜色
- 润乾报表中修改浏览式报表行的背景色
- FineReport JS实现分页预览改变鼠标悬停所在的行列的背景色
- 鼠标移动改变背景色 鼠标点击后给据设定的值添加图片到指定的列
- 鼠标指向表格中的一行时,该行背景色改变;点击行时,突出显示标记颜色
- 润乾——鼠标滑过改变行背景色
- JavaScript实现点击单元格改变背景色的方法
- 鼠标经过时,改变div块的背景色
- Bootstrap table 点击行改变背景色,点击列选中或者取消选中checkbox,根据某个属性隐藏显示某个字段
- 润乾报表分页遇到的问题
- 设置鼠标移动到DIV里面的内容上面 DIV标签改变背景色
- 功能齐全的GridView!Asp.Net中GridView的自定义分页,带箭头的排序,鼠标高亮每一行,无数据时的提醒,点击Button弹出框!
- AngularJs点击状态值改变背景色的实例
- 润乾报表的分页运算与输出的方案
- Android日历控件,还未实现点击日期改变背景色但可获取日期
- [GridView应用技巧]让鼠标移动到哪行改变背景色
- 如何实现table背景色随鼠标移动改变颜色?
- DataGrid行颜色随鼠标点击改变
- jQuery 实现 当鼠标放表格行上的时候改变背景色。
- 鼠标移到GridView某一行时改变该行的背景色方法一