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

编辑
  • 文档创建者:chuan
  • 浏览次数:4861次
  • 编辑次数:11次
  • 最近更新:Carly 于 2019-10-12
  • 1. 概述

    1.1 问题描述

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

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

    1.2 解决思路

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

    setTimeout(function(){ },1000);

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

    2. 示例

    2.1 模板制作

    1)新建决策报表,新建数据集 ds1:SELECT * FROM 订单

    2)将报表块拖入报表主体,报表块设计如下图所示:

    222

    2.2 添加初始化后事件

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

    222

    JS 代码如下:

    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);

    3. 预览效果

    3.1 PC 端

    222

    3.2 移动端

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

    4. 已完成模板

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

    点击下载模板:27-决策报表里使用延时函数实现某些js效果.frm

    附件列表


    主题: 二次开发
    标签: 暂无标签
    如果您认为本文档还有待完善,请编辑

    文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
    关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
    若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

    此页面有帮助吗?只是浏览 [ 去社区提问 ]