列表记录自动逐条高亮显示

简介:

通常我们在浏览网页的时候经常会看到多行热点信息列表数据,会每隔几秒钟在页面上就会顺次高亮显示链接标题的效果。
1

这种效果在我们的业务系统中也比较常见,比如企业仪表盘中部分区块的列表数据,网格式报表中。
2

在报表展现的页面中,如何能让所有数据行在指定的时间间隔内自动顺次高亮显示呢?还有如何做到无闪烁刷新页面来改变行的颜色呢?
下面我以设计器下报表实例网格式报表.rpx 为例具体说下实现方法。
3

这张报表原来有静态的隔行异色的设置,为了更方便看到我们实现的最终效果,这里我删除了原报表中第 5 行的背景色表达式的设置。
在报表展现的页面 showReport.jsp 中增加标签属性 generateCellID=”yes”, 目的是让报表在页面生成的时候每个格子都带有 ID,我们可以通过 ID 来获取到对应的格子来改变格子的样式效果。
4

在页面中增加 JS 方法。
浏览式报表初次加载的时候我们从数据区的第一行开始改变,当前行的行号也会自动增加,将变化的行号使用 setAttribute 保存,通过 JS 中的 setTimeout()每隔 3 秒钟回调 changeColor(),通过 getAttribute 取到变化的行号,再顺次改变当前行的颜色,当到最后一行后,再从数据区的第一行开始改变颜色。

var hcolor = "CornflowerBlue";
function changeColor(){
    var tbl = document.getElementById("report1");
    var currow = tbl.getAttribute( "currow" );

    if( currow != null ) {
        currow = parseInt( currow );
        
        var colLen = tbl.rows[currow].cells.length;
        for( var i = 0; i < colLen; i++ ){
            tbl.rows[currow].cells[i].style.backgroundColor = "white";
            tbl.rows[currow].cells[i].style.color="black"
        }
    }
    else currow = 3;
    currow++;
    if( currow == tbl.rows.length ) currow = 4;
    var cols = tbl.rows[currow].cells.length;
    for( var i = 0; i < cols; i++ ){
        tbl.rows[currow].cells[i].style.backgroundColor = hcolor;
        tbl.rows[currow].cells[i].style.color="white"
    }
    tbl.setAttribute( "currow", currow + "" );
    setTimeout( changeColor, 3000 );

}
changeColor();

通过以上步骤我们就已经实现了列表式报表每隔三秒钟从第一行数据区到最后一行顺次的高亮显示,在页面中可以方便用户避免看错行能更准确的看到列表数据,这样的效果在多区块的页面中也可以有效的引导用户查看。
5

除了上面介绍的这种页面自动高亮显示列表记录的效果外,还有静态的隔行异色的效果,具体实现可以参考文 页面表格怎么实现隔行异色、隔行变色 ;如果不想页面记录自动来高亮显示,还可以参考这篇文 鼠标移入报表时高亮显示所在行 ,实现鼠标指向时数据高亮显示的效果哦!

目录
相关文章
|
10月前
EXCEL导入程序中(针对excel单元格合并等导致的一行多条数据重复解决办法)
EXCEL导入程序中(针对excel单元格合并等导致的一行多条数据重复解决办法)
104 0
|
2月前
|
SQL C# 数据库
C# 读取多条数据记录导出到 Word 标签模板
C# 读取多条数据记录导出到 Word 标签模板
|
3月前
【word】论文、报告:①插入图表题注,交叉引用②快速插入图表目录③删改后一键更新
【word】论文、报告:①插入图表题注,交叉引用②快速插入图表目录③删改后一键更新
136 0
|
10月前
|
数据库
机房收费系统——学生基本信息维护(组合查询,选中整行)
机房收费系统——学生基本信息维护(组合查询,选中整行)
40 0
机房收费系统——学生基本信息维护(组合查询,选中整行)
|
12月前
|
Python
一日一技:从列表中一次性筛选多个指定位置的数据
一日一技:从列表中一次性筛选多个指定位置的数据
72 0
Linux Ctrl r 快速查询历史命令并查找符合条件的多条命令
Linux Ctrl r 快速查询历史命令并查找符合条件的多条命令
MPAndroidChart_并列柱状图,及如何实现点击隐藏掉不需要的条目。
在比赛中遇到了MP的并列柱状图,看网上对这方面记录并不是很多,所以今天就做一个教程吧。
160 0
MPAndroidChart_并列柱状图,及如何实现点击隐藏掉不需要的条目。
ES复杂操作-精确查询多个值和高亮显示
ES复杂操作-精确查询多个值和高亮显示
|
移动开发 Python
批量查找文本中的内容
@echo off findstr /ims "查找内容" *.*>list.txtps:把含有相关文字内容的文档输出到list.txt文本中,适用于能用notepad打开的各种文档.   是一个修改升级的版本,原程序是这个《批量查找替换文本文件内容》。
1024 0
|
存储 小程序
小程序实现搜索历史记录,去重搜索字段以及限制展示字段数量
小程序实现搜索历史记录,去重搜索字段以及限制展示字段数量
1355 0