JS设置动态背景/边框 FineReport帮助文档|报表开发|报表使用|学习教程

历史版本24 :JS设置动态背景/边框返回文档

编辑时间:10-19 14:32 历史版本: 最新历史版本上一篇历史版本下一篇历史版本 内容长度:7544 图片数:13目录数:6 修改原因:更换地图图片

1. 概述
2. 决策报表设置动态背景
3. 普通报表设置动态背景
4. 设置动态边框
5. 预览效果
6. 已完成模板

1. 概述编辑

1.1 问题描述

设计器里面的插入图片只能够插入格式为 png 或 jpg 的静态图片。

如果需要插入 GIF 动图的话，该如何完成呢？

1.2 解决思路

用户可通过 JS 设置动态背景，可使用 WEBIMAGE() 函数设置动态边框。

2. 决策报表设置动态背景编辑

本小节具体讲述如何在决策报表中添加 GIF 动态背景。

2.1 准备图片

准备 GIF 动图，将 GIF 动图放在文件夹%FR_HOME%\webapps\webroot\help\picture下，图片命名为 1.gif。如下图所示：

点击下载 1.gif ：1.gif

222

2.2 添加初始化后事件

选择文件>新建决策报表，在控件列表中选择 body，添加初始化后事件，如下图所示：

JS 代码如下：

setTimeout(function() {
    $('.content-container').css({'background': 'url(/webroot/help/picture/1.gif)no-repeat','background-size':'100% 100%'});
}, 1000);

注：图片需放在服务器上，URL 中的地址要填写图片的实际地址。

注：如果复制的代码后面出现空格请删掉，否则会出现语法错误

2.3 模板预览

保存模板，预览效果如下图所示：

3. 普通报表设置动态背景编辑

本小节具体讲述如何在普通报表中添加 GIF 动态背景。

3.1 准备图片

准备一张 GIF 动图作为背景，同示例一，将 GIF 动图放在文件夹 %FR_HOME%\webapps\webroot\help\picture 下，图片命名为 1.gif。

点击下载 1.gif：1.gif

3.2 添加加载结束事件

选择文件>新建普通报表，选择模板>模板 Web 属性>分页预览设置，添加加载结束事件，如下图所示：

JS 代码如下：

setTimeout(function() {
    $('.content-container').css({'background': 'url(/webroot/help/picture/1.gif)no-repeat','background-size':'100% 100%'});
}, 1000);