【表单JS实例】决策报表里使用延时函数实现某些JS效果

1. 概述
1.1 问题描述

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

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

1.2 解决思路

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

setTimeout(function(){ },1000);

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

2. 示例

2.1 模板制作

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

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

2.2 添加初始化后事件

选中报表块，添加初始化后事件，如下图所示：

JS 代码如下：

1. setTimeout(function() {
   
2.     var background_color = "rgb(255,0,0)";
   
3.     var frozen_back_color = new Array();
   
4.     var back_color = new Array();
   
5.     var $last_tr;
   
6.     var i = 0;
   
7.     $(".x-table tr").bind("mouseenter", function() {
   
8.         if(typeof($last_tr) != "undefined") {
   
9.             if(typeof($(this).attr("id")) != "undefined") {
   
10.                 if(typeof($("#content-container #frozen-west").attr("id")) != "undefined") {
    
11.                     $("#content-container #" + $last_tr.attr("id")).each(function() {
    
12.                         $(this).children("td").each(function() {
    
13.                             $(this).css("background-color", frozen_back_color[$(this).index()]);
    
14.                         });
    
15.                         i = i + 1;
    
16.                     });
    
17.                     i = 0;
    
18.                 } else {
    
19.                     $last_tr.children("td").each(function() {
    
20.                         $(this).css("background-color", back_color[$(this).index()]);
    
21.                     });
    
22.                 }
    
23.                 frozen_back_color = [];
    
24.                 back_color = [];
    
25.             }
    
26.         }
    
27.         if(typeof($(this).attr("id")) != "undefined") {
    
28.             if(typeof($("#content-container #frozen-west").attr("id")) != "undefined") {
    
29.                 $("#content-container #" + $(this).attr("id")).each(function() {
    
30.                     frozen_back_color = new Array();
    
31.                     $(this).children("td").each(function() {
    
32.                         frozen_back_color[$(this).index()] = $(this).css("background-color");
    
33.                         $(this).css("background-color", background_color);
    
34.                     });
    
35.                     i = i + 1;
    
36.                 });
    
37.                 i = 0;
    
38.             } else {
    
39.                 $(this).children("td").each(function() {
    
40.                     back_color[$(this).index()] = $(this).css("background-color");
    
41.                     $(this).css("background-color", background_color);
    
42.                 });
    
43.             }
    
44.         }
    
45.     });
    
46.     $(".x-table tr").bind("mouseleave", function() {
    
47.         if(typeof($(this).attr("id")) != "undefined") {
    
48.             $last_tr = $(this);
    
49.         }
    
50.     });
    
51. }, 1000);

复制代码

3. 预览效果
3.1 PC 端

3.2 移动端

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

4. 已完成模板

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

模板下载见附件