自訂參數面板和工具欄- FineReport帮助文档 - 全面的报表使用教程和学习资料

1. 概述

1.1 問題描述

FineReport 本身自帶多種可編輯元件，可以實現複雜參數介面的製作。但是有時為了實現與系統介面中元件的一致，希望不使用 FR 內建參數介面和內建工具欄，而是自己定義參數介面以及工具欄，此時要如何設定呢？

效果如下圖所示：

①為參數面板，②為：自訂工具欄

1.2 實現思路

在自訂參數界面中介紹了自定义按钮的實現方式，在自訂工具欄章節中介紹了各種按鈕的實現方式，那麼只需要將這兩個實現程式結合起來即可。

2. 操作步驟

2.1 編輯範本

以自訂參數介面中的最終範本/demo/parameter/庫存查詢每頁顯示固定行.cpt範本為例，將其嵌入到頁面中去，並且不顯示範本參數介面和內建工具欄。

2.2 網頁設計

網頁設計參見自訂參數界面，只需要重新整理增一個工具欄即可，工具欄新增的詳細介紹請查看自定义按钮

HTML 完整程式碼如下：

<html>
  <head>  
  <title>自訂參數介面及工具欄</title>  
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
  <script type="text/javascript">
    function autoSubmit() {
    var num = document.getElementById('num').value; //獲取正文元件的值
    var row = document.getElementById('row').value; //獲取下拉框元件的值
    //連接出最終報表存取路徑，並對完整的路徑進行編碼轉換，防止亂碼問題
    var reportURL = encodeURI("/webroot/decision/view/report?viewlet=/demo/parameter/庫存查詢每頁顯示固定行.cpt&para=" + num + "&row=" + row);
    document.paraForm.action = reportURL; //透過form的name獲取表單，並將報表存取路徑賦給表單的action
    document.paraForm.submit(); //觸發表單提交事件
    }
  </script>
  </head>  
  <body>
 
  <fieldset>
    <legend>查詢表單：</legend>
  <form name="paraForm" method="post" target="reportFrame">
    最小庫存量：<input type="text" name="num" id="num" value="1"/>
    每頁顯示行數：<select name="row" id="row">  
    <option value="10" select>10  
    <option value="20">20
    <option value="30">30
    <input type="button" name="show" value="查詢" onclick="autoSubmit()"/>
   </form> <!-- 自訂工具欄-->  
    <div id="toolbar">       
    <button type="button" onclick="document.getElementById('reportFrame').contentWindow._g().gotoFirstPage()">首頁</button>  
    <button type="button" onclick="document.getElementById('reportFrame').contentWindow._g().gotoPreviousPage()">上一頁</button>       
    <button type="button" onclick="document.getElementById('reportFrame').contentWindow._g().gotoNextPage()">下一頁</button>       
    <button type="button" onclick="document.getElementById('reportFrame').contentWindow._g().gotoLastPage()">末頁</button>              
    <button type="button" onclick="document.getElementById('reportFrame').contentWindow._g().noClientPrint()">零用戶端列印</button>          
    <button type="button" onclick="document.getElementById('reportFrame').contentWindow._g().exportReportToExcel('page')">匯出[Excel](分頁)</button>  
    <button type="button" onclick="document.getElementById('reportFrame').contentWindow._g().exportReportToWord()">匯出[Word]</button>              
    </div>  
  </fieldset>
    <iframe id="reportFrame" name="reportFrame" width="100%" height="100%" ></iframe>  
  </body>  
</html>

2.3 效果預覽

啟動工程，在瀏覽器輸入：http://localhost:8075/webroot/help/page_demo/parameter_toolbar.html，效果如下圖：

支援在行動端查看頁面，只需要將上述地址中 localhost 換成伺服器 IP，然後透過 URL 在行動端存取即可。

上一篇：iframe 嵌入報表捲軸問題

下一篇：URL 參數傳遞給 iframe 中的報表

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

中文（简体） English 日本語

中文（繁體）

自訂參數面板和工具欄