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

简介:

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

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

目录
相关文章
|
11月前
|
监控 编译器 Go
1 行命令引发的Go应用崩溃
这篇文章分析了Go编译时插桩工具导致go build -race竞态检测产生崩溃的原因。
789 179
|
数据采集 Web App开发 API
虾皮(Shopee)商品详情数据接口详解
虾皮(Shopee)是东南亚与台湾领先的电商市场,为买卖双方搭建桥梁。本文介绍如何利用网页爬虫技术获取商品详情数据,适用于无API访问权限的情况。通过Python的`requests`和`beautifulsoup4`库,可从网页中提取信息。首先需安装上述库,然后使用示例代码发送HTTP请求并解析HTML。注意遵守虾皮的服务条款,应对可能的动态内容和反爬虫措施。对于API需求,建议查阅官方文档。
593 3
|
机器学习/深度学习 数据可视化 大数据
机器学习与大数据分析的结合:智能决策的新引擎
机器学习与大数据分析的结合:智能决策的新引擎
648 15
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升代码质量和团队协作效率。
【10月更文挑战第8天】本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升代码质量和团队协作效率。通过安装 VSCode 插件、配置 ESLint 和 Prettier,实现代码规范检查和自动格式化,确保代码风格一致,提高可读性和维护性。
465 2
|
存储 JavaScript 安全
|
Java 程序员 容器
【多线程面试题二十四】、 说说你对JUC的了解
这篇文章介绍了Java并发包java.util.concurrent(简称JUC),它是JSR 166规范的实现,提供了并发编程所需的基础组件,包括原子更新类、锁与条件变量、线程池、阻塞队列、并发容器和同步器等多种工具。
|
监控 网络协议 网络安全
ssh服务中如何批量管理100多台机器(Paramiko、 psutil模块)、跳板机(堡垒机)
ssh服务中如何批量管理100多台机器(Paramiko、 psutil模块)、跳板机(堡垒机)
|
Java 开发工具
JVM参数太多?一网打尽常用JVM参数!
JVM参数太多?一网打尽常用JVM参数!
|
前端开发 IDE JavaScript
使用editorconfig配置你的编辑器
使用editorconfig配置你的编辑器
使用editorconfig配置你的编辑器
|
机器人 Linux 数据安全/隐私保护
Python办公自动化【Windows中定时任务、OS/linux 系统定时任务 、Python 钉钉发送消息、Python 钉钉发送图片】(九)-全面详解(学习总结---从入门到深化)
Python办公自动化【Windows中定时任务、OS/linux 系统定时任务 、Python 钉钉发送消息、Python 钉钉发送图片】(九)-全面详解(学习总结---从入门到深化)
632 0