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

我是社区第485122位番薯,欢迎点我头像关注我哦~
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

模板下载见附件


编辑于 2020-12-28 17:34  

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

0回帖数 1关注人数 6427浏览人数
最后回复于:2020-12-28 17:34

返回顶部 返回列表