决策报表里使用延时函数实现某些js效果

系统管理员 2022-02-02 01:17 187阅读 0赞

1. 描述

有的时候有些js代码在cpt里可以运行成功，但是在决策报表里会没有效果，举例：

[分页预览改变鼠标悬停所在行背景色][Link 1]的代码，在决策报表的报表块使用，预览时没有效果。

2. 思路

这是由于决策报表里没有加载结束后事件，只有初始化后事件，但是我们需要在决策报表加载结束后再执行这段代码，因此我们在代码前面加上setTimeout()延时函数就可以起作用了。

![20190510135345454.png][]setTimeout(function()\{ \},1000);

注：setTimeout()延时函数支持移动端。

3. 操作步骤

1）新建决策报表，新建数据集ds1：SELECT \* FROM 订单。

2）将报表块拖入报表主体，报表块设计如下：

![http://help.finereport.com/uploads/201808/20180813154724\_6149.png][http_help.finereport.com_uploads_201808_20180813154724_6149.png]

3）返回表单，选中报表块，添加一个初始化后事件：

![http://help.finereport.com/uploads/201808/20180813154724\_6817.png][http_help.finereport.com_uploads_201808_20180813154724_6817.png]

编辑该事件添加下面的js代码：

![20190510135345454.png][]setTimeout(function() \{

var background\_color = "rgb(255,0,0)";

var frozen\_back\_color = new Array();

var back\_color = new Array();

var $last\_tr;

var i = 0;

$(".x-table tr").bind("mouseenter", function() \{

if(typeof($last\_tr) != "undefined") \{

if(typeof($(this).attr("id")) != "undefined") \{

if(typeof($("\#content-container \#frozen-west").attr("id")) != "undefined") \{

$("\#content-container \#" \+ $last\_tr.attr("id")).each(function() \{

$(this).children("td").each(function() \{

$(this).css("background-color", frozen\_back\_color\[i\]\[$(this).index()\]);

\});

i = i + 1;

\});

i = 0;

\} else \{

$last\_tr.children("td").each(function() \{

$(this).css("background-color", back\_color\[$(this).index()\]);

\});

frozen\_back\_color = \[\];

back\_color = \[\];

if(typeof($(this).attr("id")) != "undefined") \{

if(typeof($("\#content-container \#frozen-west").attr("id")) != "undefined") \{

$("\#content-container \#" \+ $(this).attr("id")).each(function() \{

frozen\_back\_color\[i\] = new Array();

$(this).children("td").each(function() \{

frozen\_back\_color\[i\]\[$(this).index()\] = $(this).css("background-color");

$(this).css("background-color", background\_color);

\});

i = i + 1;

\});

i = 0;

\} else \{

$(this).children("td").each(function() \{

back\_color\[$(this).index()\] = $(this).css("background-color");

$(this).css("background-color", background\_color);

\});

$(".x-table tr").bind("mouseleave", function() \{

if(typeof($(this).attr("id")) != "undefined") \{

$last\_tr = $(this);

\});

\}, 1000);

4）保存模板预览。

4. 预览效果

4.1 PC端预览效果

![http://help.finereport.com/uploads/201808/20180813154724\_3240.gif][http_help.finereport.com_uploads_201808_20180813154724_3240.gif]

4.2 移动端预览效果

注：示例中的js不支持移动端。

5. 已完成模板

模板效果在线查看请点击：[决策报表里使用延时函数实现某些js效果.frm][js_.frm]

已完成的模板，可参见：%FR\_HOME%\\webapps\\webroot\\WEB-INF\\reportlets\\doc\\JS\\表单JS实例\\27-决策报表里使用延时函数实现某些js效果.frm

[右击存储模板][Link 2]

[Link 1]: http://help.finereport.com/doc-view-1625
[20190510135345454.png]: /images/20220202/e1d68bf7899a4ef5835c204f48a389ed.png
[http_help.finereport.com_uploads_201808_20180813154724_6149.png]: /images/20220202/d5778e0104364e85851dc69a02e4944a.png
[http_help.finereport.com_uploads_201808_20180813154724_6817.png]: /images/20220202/96a344a7610b446fb0370eea3ee1411a.png
[http_help.finereport.com_uploads_201808_20180813154724_3240.gif]: /images/20220202/31f0adc52b7a4ae6885e101066fd99f3.png
[js_.frm]: http://www.finereporthelp.com:8889/demo/ReportServer?formlet=doc/JS/%E8%A1%A8%E5%8D%95JS%E5%AE%9E%E4%BE%8B/27-%E5%86%B3%E7%AD%96%E6%8A%A5%E8%A1%A8%E9%87%8C%E4%BD%BF%E7%94%A8%E5%BB%B6%E6%97%B6%E5%87%BD%E6%95%B0%E5%AE%9E%E7%8E%B0%E6%9F%90%E4%BA%9Bjs%E6%95%88%E6%9E%9C.frm
[Link 2]: http://www.finereporthelp.com:8021/download/demo/9.0demo/doc/JS/%E8%A1%A8%E5%8D%95JS%E5%AE%9E%E4%BE%8B/27-%E5%86%B3%E7%AD%96%E6%8A%A5%E8%A1%A8%E9%87%8C%E4%BD%BF%E7%94%A8%E5%BB%B6%E6%97%B6%E5%87%BD%E6%95%B0%E5%AE%9E%E7%8E%B0%E6%9F%90%E4%BA%9Bjs%E6%95%88%E6%9E%9C.frm