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

一、概述

1

問題描述。

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

2

實現思路。

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

二、操作步驟

1

編輯範本。

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

2

網頁設計。

網頁設計參見自訂參數介面，只需要再新增一個工具欄即可，工具欄新增的詳細介紹請查看自訂按鈕。
在網頁中新增自訂工具欄程式碼，如下圖1。
程式碼如下程式碼1。
在網頁中新增自訂參數面板程式碼，如下圖2。
HTML 完整程式碼如程式碼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>

  <head>  

  <title>FineReport Demo</title>  

  <meta http-equiv="Content-Type" content="text/html; charset=GBK" />  

  <script type="text/javascript">

    //cjkEncode方法的實現程式碼，放在網頁head中或者使用者自己的js檔案中

    function cjkEncode(text) {                                                                          

      if (text == null) {       

        return "";       

      }       

      var newText = "";       

      for (var i = 0; i < text.length; i++) {       

        var code = text.charCodeAt (i);        

        if (code >= 128 || code == 91 || code == 93) {  //91 is "[", 93 is "]".       

          newText += "[" + code.toString(16) + "]";       

        } else {       

          newText += text.charAt(i);       

        }       

      }       

      return newText;       

    }   

    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.flashPrint()">客户端FLASH打印</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>

3

效果預覽。

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