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

简介:

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

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

目录
相关文章
|
9月前
|
监控 编译器 Go
1 行命令引发的Go应用崩溃
这篇文章分析了Go编译时插桩工具导致go build -race竞态检测产生崩溃的原因。
667 179
|
12月前
|
机器学习/深度学习 搜索推荐 算法
协同过滤算法
协同过滤算法
920 0
|
10月前
|
机器学习/深度学习 数据可视化 大数据
机器学习与大数据分析的结合:智能决策的新引擎
机器学习与大数据分析的结合:智能决策的新引擎
575 15
|
9月前
|
安全 数据安全/隐私保护 计算机视觉
COVID -19健康二维码改进措施
疫情期间,阿里健康码助力中国复工复产,为全球防疫提供经验。但实际使用中存在诸多问题:如缺乏面部识别、无过期机制、易被截图分享等,导致防疫人员无法准确核实身份。未来应从技术层面解决这些问题,如引入口令申请、人脸识别、自动过期机制等,确保健康码的安全性和实时性。同时,建议通过阿里云、腾讯云等平台加强数据安全防护,防止截屏和录屏操作,确保防疫工作的有效性。
|
12月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升代码质量和团队协作效率。
【10月更文挑战第8天】本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升代码质量和团队协作效率。通过安装 VSCode 插件、配置 ESLint 和 Prettier,实现代码规范检查和自动格式化,确保代码风格一致,提高可读性和维护性。
386 2
|
12月前
|
存储 JavaScript 安全
|
Java 程序员 容器
【多线程面试题二十四】、 说说你对JUC的了解
这篇文章介绍了Java并发包java.util.concurrent(简称JUC),它是JSR 166规范的实现,提供了并发编程所需的基础组件,包括原子更新类、锁与条件变量、线程池、阻塞队列、并发容器和同步器等多种工具。
|
监控 网络协议 网络安全
ssh服务中如何批量管理100多台机器(Paramiko、 psutil模块)、跳板机(堡垒机)
ssh服务中如何批量管理100多台机器(Paramiko、 psutil模块)、跳板机(堡垒机)
|
Java 开发工具
JVM参数太多?一网打尽常用JVM参数!
JVM参数太多?一网打尽常用JVM参数!
|
设计模式 Go 调度
Golang深入浅出之-Go语言中的并发模式:Pipeline、Worker Pool等
【5月更文挑战第1天】Go语言并发模拟能力强大,Pipeline和Worker Pool是常用设计模式。Pipeline通过多阶段处理实现高效并行,常见问题包括数据竞争和死锁,可借助通道和`select`避免。Worker Pool控制并发数,防止资源消耗,需注意任务分配不均和goroutine泄露,使用缓冲通道和`sync.WaitGroup`解决。理解和实践这些模式是提升Go并发性能的关键。
207 2