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¶=" + num + "&row=" + row);
document.paraForm.action = reportURL;
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 在行動端存取即可。
