註:此文為「帆軟十年,項冊徵集」活動的獲獎作品。
想必大家都已經通過帆軟報表的幫助文檔及其他方式,知道了很多關於帆軟報表的配置、生成等內容。今天我們跳開這個話題從另一個角度來認識到,我們使用帆軟報表能給我們帶來什麼。
閑話不多說,我們直接來看一下最終效果。
(圖一)
這個是首頁效果,其中的每個模塊數據圖表均是使用帆軟的報表系統生成,整體效果渾然一體。
同時還有一個更複雜的報表數據統計模塊,如圖二
(圖二)
下面就來說道下該系統構建的幾個關鍵技術要點。
系統整體架構說明:
Asp.Net系統+IIS+帆軟報表管理系統+Tomcat
整個數據的傳遞過程是,在自身的業務系統中將相關的報表統計參數通過頁面POST到帆軟報表的服務頁面,獲取返回的結果,再進行結果的過濾整理,顯示到頁面中。
一 伺服器整合
如我上面說過的,我們的業務系統使用的是asp.net,眾所周知帆軟報表系統是基於java的,所以我們需要進行伺服器端的整合工作。
網路上關於IIS與Tomact的整合教程非常之多,我就不做過多的說明,只是將我寫給我們實施人員的操作文檔提供給大家,大家可以下載下面的壓縮包進行查看。本人有一個在2003系統下的整合視頻,因為附件限制無法上傳,大家可以通過留言索取,相信大家看過後能夠搞定的。
二 數據傳遞
我們進行數據分析的時候肯定是會有很多相關的查詢條件的,大家都知道帆軟報表包含了查詢條件的相關功能,可是這個很多時候並不能滿足我們的需要(ps:我們的需求總是無窮盡的)。如圖二上面所顯示的,我們很多查詢條件是根據我們的業務系統緊密相關的,當然查詢界面也要和諧同樣不是嗎,第三我們的查詢條件主要是相同的,如每張報表都需要去單獨配置條件,想必是很累的(ps:我們有近百張的報表)。
上面啰嗦了一堆,結論就是我們需要自己的查詢條件功能,帆軟報表只需要識別我們傳遞過去的查詢條件極其值內容即可。
帆軟FineReport報表系統的幫助文檔中有過相關的描述,可以通過get、post等方式傳遞參數內容,這裡我們用到了POST傳遞數據。我們來說一下具體的實現過程,相信看這篇文章的都是技術人員,那就不拐彎抹角了。
首先,在你需要顯示報表的頁面嵌入一個iframe,src填帆軟報表的伺服器地址,如:xxxx/ReportServer?reportlet=cpt報表文件存儲路徑&&op=form。這個iframe就是我們要post的對象,再建立一個from表單,在裡面添加相關的查詢條件文本框,如<input id=”paras” name=”paras” value=”gaby”>。將這個表單提交給iframe,傳遞給帆軟報表的ReportServer,其內部會獲取到並進行相關的操作,最終跟報表模版內的配置相互匹配,生成查詢統計條件。
<iframe id=”reportIframe” name=”reportIframe” width=”100%” scrolling=”auto” style=”margin: 0;
padding: 0;” frameborder=”0″></iframe>
我們這裡src內容是通過js來動態構建的。
- code view
帆軟報表的模版中需要進行如下設置:
首先在模版編輯器中,選擇報表菜單,選擇報表參數,點擊添加參數,新建一個名稱為「paras」的報表參數。這個參數名稱必須與上述表單中控制項的名稱相同,也就是要跟post過來的鍵值數據的鍵名稱相同。
(圖三)
建立好該參數後,你在報表模版的單元格計算和過濾中就能使用這個參數了,注意一下類型哦~。在數據集中可以直接輸入「${paras}」來使用,帆軟報表內在的函數很多,相信您肯定能變換的使用的很好。
三 獲取你想要的數據
通過上面的操作,相信在你的iframe中就能獲取到帆軟報表提供給我們的統計結果了。可是這時你會發現……
(圖四)
這根本不是我們想要的,這個界面跟我們的系統簡直格格不入嘛。所以,我們要做的是,去掉上面那一欄,調整下面的主體內容格式。
仔細研究帆軟報表返回的數據頁面我們會知道,他們使用是JQuery作為js操作庫的,數據內容是通過ajax來返回的。所以直接查看源代碼是看不到具體頁面內容的,我們可以通過debug bar來查看。我進過分析,最後是通過帆軟報表中能夠給結果也添加自定義js和css文件的功能來實現的。
(圖四)
這裡的css和js文件需要存放在Tomact下帆軟的伺服器目錄中,它們會在頁面生成的時候嵌入到頁面中。下面我們來解釋一下我是如何去掉那個工具條的。這裡我們分析頁面找到了工具條的html代碼內容,所以只需要一條css就解決了問題。
.FR-ToolBar-disabled?{?display:?none;?}
那我們在回頭看看圖一,我們這如此小的窗口中顯示了圖表,還有表格,並且都是塞滿了這個模塊窗口,如果直接嵌入帆軟報表工具的返回數據,那肯定是會很難看的,所以我們需要過濾它給我們的返回數據。我們已經知道帆軟報表中加入了JQuery,所以我們使用了JQuery。代碼如下
- code view
這段代碼我們時候針對數據表格的,這裡我們巧妙的利用了異常來解決非同步數據的延時問題。
下面這段是解決靜態統計圖的,這裡就是一張圖片,很好理解。動態統計圖是一個js的報表,稍微複雜一點,大家可以自己去嘗試一下。
- view code
通過上面的講解和事例,相信大家都知道,最主要的關鍵點了。
四、還原我們想要的工具條功能
在圖二中大家可以看到報表頁面的左上角有兩個按鈕,分別是列印和導輸出。這兩個按鈕是我們自行添加到我們頁面的,所以風格效果可以跟系統保持統一。因為我們之前去掉了原有的工具條,所以列印和導出按鈕都沒有了,這裡我們要從新實現它。
通過js的對象調試,我們跟蹤到了原始工具條中列印和導出按鈕的核心代碼,我把代碼在自己的頁面中做了實現。
- view code
其中contentPane是帆軟報表客戶端頁面的js中的核心對象內容,通過調用它其中的方法能夠完美的還原之前工具條中按鈕的功能。
結束語
這次講解都到這裡吧,雖然說不是系統的解析帆軟報表,但是相信大家通過這篇文章也能夠有一個新的視角,以便能更好的使用帆軟報表,讓其能很好的跟自身的業務系統兼容起來,讓寶刀以最美的方式來展示它的鋒利。
喜歡這篇文章嗎?歡迎分享按讚,給予我們支持和鼓勵!