反饋已提交
網絡繁忙
FineReport 本身自帶多種可編輯元件,可以實現複雜參數介面的製作。但是有時為了實現與系統介面中元件的一緻性,希望不使用FR內建的參數介面和內建工具欄,而是自己定義參數介面以及工具欄,此時要如何設定呢?
效果如下圖所示。
①為參數面板,②為自訂工具欄。
在 自訂參數介面中介紹了自訂按鈕的實現方式,在自訂工具欄章節中介紹了各種按鈕的實現方式,那麼只需要將這兩個實現過程結合起來即可。
以自訂參數介面中的最終範本/demo/parameter/庫存查詢每頁顯示固定行.cpt範本為例,將其嵌入到頁面中去,並且不顯示範本參數介面和內建工具欄。
網頁設計參見 自訂參數介面,只需要再新增一個工具欄即可,工具欄新增的詳細介紹請查看 自訂按鈕。
在網頁中新增自訂工具欄程式碼,如下圖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¶=" + 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>
已完成頁面請查看%FR_HOME%/webapps/webroot/help/page_demo/parameter_toolbar.html。
啟動設計器,在瀏覽器輸入:http://localhost:8075/webroot/help/page_demo/parameter_toolbar.html,效果如下圖。
parameter_toolbar.html
库存查询每页显示固定行.cpt
文 檔回 饋
滑鼠選中內容,快速回饋問題
滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。
不再提示
10s後關閉