历史版本19 :自定义提交按钮 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

1.1 应用场景

在我们使用填报表时,有时只需要提交按钮将数据入库,不希望使用 FineReport 内置的工具栏的按钮,希望能够自定义提交按钮。

1.2 功能简介

自定义按钮既可以是 FineReport 模板中添加的按钮控件,也可以是 Web 集成页面中,HTML 的按钮标签。

1)FineReport 模板中的按钮控件实现自定义提交操作详细请参照 自定义按钮中实现提交操作
2)而在 Web 页面中,点击 HTML 中的按钮提交 iframe 中的 FineReport 报表将在本文详述。效果如下图所示:

1615950241456783.png

1.3 实现思路

FineReport 内置的报表提交 JS 代码是contentPane.writeReport(),如果是调用嵌入的报表提交功能的话,使用document.getElementById('报表所在iframe的id').contentWindow.contentPane.writeReport();

2. 示例一:点击按钮提交单张模板编辑

2.1 模板准备

使用模板:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Form\FreeFrom\FreeForm.cpt

2.2 新建 HTML 文件

1)新建 write.html,内容如下:

点击下载文件:write.html

<html>     
<head>     
<title>自定义提交按钮</title>   
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
</head>     
<body>     
<div id="toolbar">     
<button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.writeReport()">提交</button>
</div>     
<iframe id="reportFrame" onload="afterload()" src="/webroot/decision/view/report?viewlet=doc/Form/FreeFrom/FreeForm.cpt&op=write&__showtoolbar__=false" width = 100% height = 80%></iframe>     
</body>     
</html> 

2)将 write.html 放置到 %FR_HOME%\webapps\webroot\help\page_demo 路径下,如下图所示:

3.png

2.3 效果预览

打开服务器,在浏览器端输入http://localhost:8075/webroot/help/page_demo/write.html,效果如下图所示:

1615950820342241.gif

3. 示例二:点击按钮提交多张模板编辑

3.1 模板准备

1)下载网页框控件插件,具体可参见:在决策报表中使用网页框控件

2)准备两张填报模板,本文示例准备模板为:

  • %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Form\FreeFrom\FreeForm.cpt

  • %FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\form\填报可暂存.cpt

3.2 添加网页框控件

1)在决策报表中拖入一个网页框控件,命名为aa,「模板路径」为FreeForm.cpt模板所在路径,参数为op,值为write,如下图所示:

1615967761370905.png

2)再拖入一个网页框控件,命名为bb,「模板路径」为填报可暂存.cpt模板所在路径,参数为op,值为write,如下图所示:

1615968039324860.png

3.3 添加按钮控件

在决策报表中添加按钮控件,并为其添加点击事件,JavaScript 代码如下所示:

注:「AA」和「BB」为网页框控件名称,需全部大写。

document.getElementsByName("AA")[0].contentWindow.contentPane.writeReport();
document.getElementsByName("BB")[0].contentWindow.contentPane.writeReport();

1615968279735845.png

3.4 效果预览

点击「PC端预览」按钮,效果如下图所示:

1615968576689340.gif

3.5 已完成模板

已完成模板可参见:%FR_HOME%\webroot\WEB-INF\reportlets\doc\frm\点击按钮提交多张模板.frm

点击下载模板:点击按钮提交多张模板.frm