自訂提交按鈕- FineReport帮助文档 - 全面的报表使用教程和学习资料

1. 概述

1.1 應用場景

在我們使用填報表時，不希望使用 FineReport 內建工具欄的按鈕，希望能夠自訂提交按鈕，將資料入庫。

1.2 功能簡介

自訂按鈕既可以是 FineReport 範本中新增的按鈕元件，也可以是 Web 整合頁面中，HTML 的按鈕標籤。

1）FineReport 範本中的按鈕元件實現自訂提交操作詳細請參照 JS自訂提交按鈕
2）而在 Web 頁面中，點選 HTML 中的按鈕提交 iframe 中的 FineReport 報表將在本文詳述。效果如下圖所示:

1.3 實現思路

FineReport 內建報表提交 JS 程式碼是_g().writeReport()，如果是呼叫嵌入的報表提交功能的話，使用document.getElementById('報表所在iframe的id').contentWindow._g().writeReport();

2. 操作步驟

2.1 範本準備

使用範本：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Form\FreeFrom\FreeForm.cpt

2.2 建立 HTML 檔案

1）建立 write.html，內容如下：

點選下載檔案：write.zip

<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._g().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 路徑下，如下圖所示：

2.3 效果預覽

開啟伺服器，在瀏覽器端輸入http://localhost:8075/webroot/help/page_demo/write.html，效果如下图所示：

已經是第一篇

已經是最後一篇

有幫助
沒幫助
只是瀏覽
圖片不清晰
用語看不懂
功能說明看不懂
操作說明太簡單
內容有錯誤

中文（简体） English 日本語

中文（繁體）

自訂提交按鈕