plaintextedit指定一行一行的高亮显示_列表记录自动逐条高亮显示

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

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

在报表展现的页面中，如何能让所有数据行在指定的时间间隔内自动顺次高亮显示呢？还有如何做到无闪烁刷新页面来改变行的颜色呢？

下面我以设计器下报表实例网格式报表.rpx 为例具体说下实现方法。

这张报表原来有静态的隔行异色的设置，为了更方便看到我们实现的最终效果，这里我删除了原报表中第 5 行的背景色表达式的设置。

在报表展现的页面 showReport.jsp 中增加标签属性 generateCellID=”yes”, 目的是让报表在页面生成的时候每个格子都带有 ID，我们可以通过 ID 来获取到对应的格子来改变格子的样式效果。

在页面中增加 JS 方法。

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

<script language="javascript">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();
</script>

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

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

plaintextedit指定一行一行的高亮显示_列表记录自动逐条高亮显示相关推荐

配置导出MOSS2010列表数据到Excel并根据列表记录自动刷新数据
第一章简介场景描述根据最近客户的需求,他们需要自动维护MOSS2010列表数据导出到Excel的数据实时同步,就是列表添加记录后,导出的Excel列表自动同步数据过来. 第二章配置方法 1. ...
【python数据处理】将DataFrame数据拆解成为一行一行由字典键值对组成的列表
将DataFrame数据拆解成为一行一行由字典键值对组成的列表问题解决拓展问题解决 import pandas as pd import numpy as npdf = pd.DataFrame ...
pandas为dataframe添加新的数据行（rows）、在dataframe后面纵向添加一行数据（数据为列表list形式）、列有不匹配将会使用NA值进行填补
pandas为dataframe添加新的数据行(rows).在dataframe后面纵向添加一行数据(数据为列表list形式).列有不匹配将会使用NA值进行填补目录
插图引用同一行两个插图_将图标变成插图的五个简单步骤
插图引用同一行两个插图 Every creative person has probably already been in this situation: A project, be it a ...
一行一个链接代码_小白写代码讨女朋友欢心，包教包会
爱情这点小事里,不花钱也可以很有情致- 你看鹅厂程序员小彭,在520来临之际,给女朋友写了段代码,不花钱就让女朋友惊喜又感动. https://elvinn-1aa07a-1251269979.tcl ...
C语言一行一行读取文件txt
参考:怎么用c语言实现读取一个txt文件里的数据要按行读出来打开文件 fopen("需要打开的路径") 然后使用fgets函数读取行 #include <stdio.h& ...
python读取excel一行一行的读取_python逐行读取excel
python读取excel文件,将每一行都保存为一个列表.比如:文件是a,b,d f,e,g u,w,o 想要变成list1=[a,b,c] list2=[f,e,g] lpython读写excel文 ...
python ui bs_Guibs的Python学习_列表
Guibs 的 Python学习_列表# 列表# 列表由一系列按特定顺序排列的元素组成, 其中元素和元素之间可以没有任何关系 # 在 Python 中, 用方括号 [] 来表示列表, 并用逗号 , 分 ...
Java一行一行的读文件和简单的写文件
读在java的实验作业中,有一个是从我们的txt文件中读取矩阵.其中数与数之间是用\t隔开.行与行之间是用\n跳过.本人java学艺不精,所以我只有自行询问度娘.得知了一个可以从文件中一行一行的读取 ...

plaintextedit指定一行一行的高亮显示_列表记录自动逐条高亮显示

plaintextedit指定一行一行的高亮显示_列表记录自动逐条高亮显示相关推荐

最新文章

热门文章