反馈已提交

网络繁忙

前端开发指南

  • 文档创建者:lu123
  • 编辑次数:28次
  • 最近更新:RosieY 于 2021-11-05
  • 1. 概述

    jQuery 是一个快速简洁的 JavaScript 库,使用户能方便地处理 HTML 实现交互效果。

    FineReport 报表前端采用 jQuery 框架,制作的报表解析后最终成为一个 HTML 文档,即每一份模板在浏览器端预览时都将对应一个 HTML 页面。因此用户可以使用 jQuery 框架的所有方法对报表前端进行二次开发;同时 FineReport 还提供了前端 JS API 供用户开发使用。

    本文将介绍在 FineReport 中如何进行前端二次开发,用户了解后就可以通过 JavaScript 或 CSS 来修改报表内容或添加交互特效。

    2. 预备知识

    在进行前端二次开发前,用户需要对以下知识有基本了解,知道 JavaScript 是如何与 HTML 和 CSS 一起工作的。

    HTML 定义了网页的内容,CSS 描述了网页的布局,JavaScript 控制了网页的行为。

    • HTML 是用来描述网页的一种语言,Web浏览器(如谷歌浏览器,Internet Explorer,Firefox)读取 HTML 文件后将其作为网页显示。

    • JavaScript 是一种编程语言,可以控制网页的行为,可以修改网页内容,代码可以直接插入 HTML 页面,插入后可由浏览器执行。

    • CSS 用于定义网页的样式,样式即如何显示 HTML 元素,如定义 HTML 中标签元素的颜色、背景等。

    更多详细内容可以查看 JavaScript 、HTML 、CSS 的学习网页。为了您更好的开发报表,建议您提前学习一下相关内容!

    3. 功能介绍

    每一份模板在浏览器端都对应一份 HTML 文档,作为一份 HTML 文档,就可以通过 JavaScript 或 CSS 进行修改。

    3.1 JavaScript 

    3.1.1 添加事件

    JavaScript 对用户的输入响应,是以事件驱动的方式进行的。所谓事件驱动,就是指在主页中执行了某种操作所产生的动作,如点击鼠标、移动窗口、选择菜单等,当动作发生后,会引起相应的事件响应。

    FineReport 提供了「事件」功能和对应的 「JavaScript 脚本」响应方式 。制作模板时,用户可以在此添加 JS 事件。如下图所示:

    添加事件时,可以直接将代码写在模板中;也可以创建一个 JS 文件后,放在工程目录下,在模板中引用此文件。如何使用可参考:JavaScript脚本

    添加事件后,当报表转为 HTML 页面时会将这些事件代码添加到 HTML 的头部,当事件被触发时代码内容将会被执行,报表就会显示出代码想要实现的效果。

    如下图所示,在设计器中给对应的模板添加了一个「填报成功」事件,事件内容为设置「打印」和「输出按钮不可用。


    预览报表,填报提交成功后,工具栏「打印」和「输出」功能不可用。如下图所示:

    20180813160001_6147.gif

    3.1.2 引用脚本

    制作模板时也可以引用 JavaScript 脚本文件,相同的功能就可以用同一个文件,提高代码的可用性。除 JavaScript脚本 编辑框中支持引用 JavaScript 脚本文件外,在菜单栏也有专门引用 JavaScript 的入口。如下图所示:


    • 若 JS 文件只用于单个模板,可以通过菜单栏点击「模板>模板 Web 属性>引用 JavaScript 」引用。

    • 若 JS 文件用于报表工程下所有模板,可通过菜单栏点击「服务器>服务器配置>引用 JavaScript」统一引用。

    如何使用可参考 模板Web属性 对应章节。

    3.1.3 Web页面集成

    以上两节主要讲解用户如何在模板中添加 JavaScript 代码。开发报表时,用户也可以将 FineReport 报表集成在 Web 页面中,集成后再通过 JavaScript 修改报表。

    如果报表嵌在网页的 iframe 中,就可以通过如下方式,获取到报表窗口:

    document.getElementById('报表所在iframe的id').contentWindow;

    其中 document.getElementById('报表所在iframe') 是获取报表 iframe 对象,contentWindow 是获取报表窗口。

    获取后,就可以使用前端代码对其修改,或者使用帆软接口 JS API。如报表嵌入在 iframe 的 ID为"reportFrame"时,调用报表的跳转到上一页接口:

    document.getElementById('reportFrame').contentWindow._g().gotoPreviousPage();

    使用帆软接口 JS API 详细介绍可参考 JS API 使用说明章节。

    3.2 CSS

    3.2.1 添加事件

    通过添加事件的方式修改 CSS 样式。修改 CSS 样式也通过 JavaScript 修改,直接使用 JavaScript脚本 添加即可。

    如下图所示,在设计器中给日期控件添加了一个「初始化后」事件,通过修改日期控件的 CSS 来修改日期控件的字体样式。

    修改后效果为:

    3.2.2 引用脚本

    制作模板时,可以引用 CSS 脚本文件。这样,相同的功能就可以用同一个文件,提高代码的可用性。在菜单栏有专门引用 CSS 的入口。如下图所示:

    • 若 CSS 文件只用于单个模板,可以通过菜单栏点击「模板>模板 Web 属性>引用 Css 」引用。

    • 若 CSS 文件用于报表工程下所有模板,可通过菜单栏点击「服务器>服务器配置>引用 Css」 统一引用 。

    如何使用可参考 模板Web属性 对应章节。

    附件列表


    主题: 二次开发
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

    请前往「服务平台」,选择「在线支持」

    热线电话:400-811-8890转2

    在线QQ(将在2023.01.05关停):800049425

    总裁办24H投诉

    热线电话:173-1278-1526

    文 档反 馈

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭

    7*24h

    智 能客 服