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 的头部，当事件被触发时代码内容将会被执行，报表就会显示出代码想要实现的效果。
如下图所示，在设计器中给对应的模板添加了一个「填报成功」事件，事件内容为设置「打印」和「输出」按钮不可用。
预览报表，填报提交成功后，工具栏「打印」和「输出」功能不可用。如下图所示：
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属性 对应章节。
