反馈已提交

网络繁忙

当前为10.0版本文档,只有最新版本的文档支持在线编辑修改,如果想创建/编辑文档,请移步至 最新版帮助文档

自定义提交按钮

  • 文档创建者:文档助手1
  • 历史版本:22
  • 最近更新:Wendy123456 于 2021-09-23
  • 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();

    注:contentPane 代码介绍请参见:contentPane ;document 对象介绍请参见:document对象

    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


    附件列表


    主题: 部署集成
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

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

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

    总裁办24H投诉

    热线电话:173-1278-1526