自定义参数界面和工具栏- FineReport帮助文档 - 全面的报表使用教程和学习资料

1. 概述

1.1 問題描述

FineReport 本身自帶多種可編輯控件，可以實現複雜參數界面的制作。但是有時爲了實現與系統界面中控件的一緻性，希望不使用FR内置的參數界面和内置工具欄，而是自己定義參數界面以及工具欄，此時要如何設置呢？

效果如下圖所示：

①爲參數面板，②爲：自定義工具欄

1.2 實現思路

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

2. 操作步驟

2.1 編輯模板

以自定義參數界面中的最終模板/demo/parameter/庫存查詢每頁顯示固定行.cpt模板爲例，将其嵌入到頁面中去，并且不顯示模板參數界面和内置工具欄。

2.2 網頁設計

網頁設計參見自定義參數界面，只需要再添加一個工具欄即可，工具欄添加的詳細介紹請查看自定義按鈕。

在網頁中添加自定義工具欄代碼，如下圖：

代碼如下：

<button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.gotoFirstPage()">首頁</button>  
    <button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.gotoPreviousPage()">上一頁</button>       
    <button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.gotoNextPage()">下一頁</button>       
    <button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.gotoLastPage()">末頁</button>              
    <button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.noClientPrint()">零客戶端打印</button>          
    <button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.exportReportToExcel('page')">導出[Excel](分頁)</button>  
    <button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.exportReportToWord()">導出[Word]</button>

在網頁中添加自定義參數面板代碼，如下圖：

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.contentPane.gotoFirstPage()">首頁</button>  
    <button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.gotoPreviousPage()">上一頁</button>       
    <button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.gotoNextPage()">下一頁</button>       
    <button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.gotoLastPage()">末頁</button>              
    <button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.noClientPrint()">零客戶端打印</button>          
    <button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.exportReportToExcel('page')">導出[Excel](分頁)</button>  
    <button type="button" onclick="document.getElementById('reportFrame').contentWindow.contentPane.exportReportToWord()">導出[Word]</button>              
    </div>  
  </fieldset>
    <iframe id="reportFrame" name="reportFrame" width="100%" height="100%" ></iframe>  
  </body>  
</html>顯示代碼

2.3 效果預覽

已完成頁面請查看%FR_HOME%/webapps/webroot/help/page_demo/parameter_toolbar.html
啓動設計器，在浏覽器輸入：http://localhost:8075/webroot/help/page_demo/parameter_toolbar.html，效果如下圖：
222