報表管理軟體中如何自定義參數界面及工具欄

FineReport本身自帶多種可編輯控制項,可以實現複雜參數界面的製作。但是有時為了實現與系統界面中控制項的一致性,希望不使用FR內置的參數界面和內置工具欄,而是自己定義參數界面以及工具欄,此時要如何設置呢?下面就通過報表管理軟體FineReport來簡單介紹。

工具/原料

報表管理軟體FineReport7.1.1
大小:148.2M 適用平台:windows/linux

方法/步驟

在網頁中添加如下代碼:

<body>

<!-- 自定義工具欄-->

<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>

完整代碼如下

<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 = cjkEncode("/WebReport/ReportServer?reportlet=/demo/parameter/number1.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>

效果如下圖所示

原作者:FineReport

本文內容整理自網絡, 文中所有觀點看法不代表淘大白的立場