二十3、【開源】EFW框架Web前端開發之經常使用組件（FusionCharts圖表、ReportAll報表等）

回《【開源】EFW框架系列文章索引》       

EFW框架源代碼下載V1.2：http://pan.baidu.com/s/1hcnuA

EFW框架實例源代碼下載：http://pan.baidu.com/s/1o6MAKCa

 

       前言：上一章講了EFW框架中的界面框架JqueryEasyUI，在一個Web系統開發中除了須要一個好的界面框架還有須要一些功能，好比：圖表展現、Web報表預覽打印、文件上傳、文本編輯等功能在Web系統開發過程當中也是常常用到的；爲了方便你們使用EFW框架開發系統，本人對比了網上主流的這些功能，把一些評價比較好或使用起來比較順手的功能給整合到EFW框架；有圖表控件FusionCharts、報表控件ReportAll和Grid++Report、上傳控件jquery.uploadify、網頁文本編輯器xheditor；固然若是你發現有更好的控件也能夠很方便的加入到EFW框架中。下面我就一一講解這幾個控件的使用方法及實現；

本文要點：

1.FusionCharts圖表控件介紹

2.ReportAll報表控件介紹

3.Grid++Report報表控件介紹

4.網頁文本編輯器

5.上傳文件控件介紹

源代碼目錄結構：

1.FusionCharts圖表控件介紹

FusionCharts是一個Flash的圖表組件，它能夠用來製做數據動畫圖表，其中動畫效果用的是Adobe Flash 8 （原Macromedia Flash的）製做的flash ， FusionCharts可用於任何網頁的腳本語言相似於HTML ， .NET，ASP ， JSP， PHP ， ColdFusion等，提供互動性和強大的圖表。使用XML做爲其數據接口， FusionCharts充分利用流體美麗的Flash建立緊湊，互動性和視覺逮捕圖表。

 

FusionCharts確實功能強大並且效果很是漂亮，可是XML的格式有點複雜，不一樣的圖形XML格式也不同，作的時候必定要對照裏面的Demo實例來覈對你生成的XML格式；

見下圖，是使用EFW框架開發的一個線形圖表，從數據庫查出DataTable數據，把第一列定義爲線形圖表的X軸，第二列定義爲Y軸數據，把DataTable利用WebFusionChart對象轉換爲XML，界面代碼經過Ajax請求控制器輸出XML賦值給JS中的FusionCharts對象顯示圖表；界面代碼比較簡單，引用FusionCharts.js文件，調用相應的圖表swf文件；

 

2.ReportAll報表控件介紹

      ReportAll是面向軟件開發人員的報表開發工具；她具備全新的設計思想。從報表設計的角度看，她完美地融合了「對象擺放」類和「電子表格」類報表工具的優勢；從數據填報的角度看，他獨特的多線程後臺數據加載方式，使任意大的數據源均可以快速返回，從而實現邊加載邊瀏覽的效果。

      ReportAll報表插件全面兼容IE、火狐、Google Chrome 、Opera、傲遊、TT等主流瀏覽器。

參考資料：http://www.reportall.com.cn/index.html

 

作Web報表一直沒有找到一個好的Web報表組件，之前有用過水晶報表、Dev中的報表控件、fineReport等都存在各類緣由在EFW框架中使用不合適，水晶報表太過龐大，Dev報表控件太難用了，fineReport這個確實比較好用可是不是免費的；通過一番糾結找了兩個國產的、輕量級的Web報表工具ReportAll和Grid++Report；兩個用起來都很是簡單；

見下圖，使用EFW框架中封裝的ReportAll報表開發一張簡單報表，報表製做涉及到先後端開發，前端界面很簡單引用ReportAllPrint.js文件動態建立報表對象，再經過Url向後臺控制器請求XML數據，後臺使用框架中的WebReportAll對象把DataTable數據轉換爲XML數據輸出顯示在界面報表控件中；

 

3.Grid++Report報表控件介紹

參考資料：http://www.rubylong.cn/index.htm

       Grid++Report 是一款高性能高效率的報表開發工具，既可開發桌面軟件的報表與打印系統，也可開發WEB(B/S)軟件的報表與打印系統。提供一個具備超強數據展示功能的數據網格(DataGrid)部件，製做各類表格報表很是簡便；運行時可經過事件處理使報表與用戶交互；針對票據套打進行了專門實現；是開發動態報表的最佳選擇。提供可視化報表設計器，設計報表快速簡單。Grid++Report除了提供打印功能外，還提供獨有的報表查詢顯示功能，像各類數據網格(DataGrid)控件同樣顯示數據，讓報表的查詢顯示與打印一次實現，既提升開發效率又保持數據的一致性，這也是Grid++Report與其它報表控件的最大區別。

 

在EFW框架中Winform版就使用Grid++Report用來開發CS報表，Grid++Report不但支持CS報表也支持Web報表開發，因此框架也把它整合到Web報表中；就功能上來講Grid++Report應該比ReportAll更強大，能夠支持在線設計報表格式；使用方式跟上面ReportAll差很少；

見下圖，使用EFW框架中封裝的Grid++Report開發了一張報表，前端頁面引用CreateControl.js和GRUtility.js建立報表對象，經過Url向後臺控制器請求XML格式數據，後臺控制器利用框架中的Grid_XMLReportData對象把DataTable數據轉換爲XML數據輸出，界面顯示報表內容；

 

4.網頁文本編輯器

參考資料：http://xheditor.com/

       xhEditor是一個基於jQuery開發的簡單迷你而且高效的在線可視化HTML編輯器，基於網絡訪問而且兼容IE 6.0+,Firefox 3.0+,Opera 9.6+,Chrome 1.0+,Safari 3.22+。
xhEditor徹底基於Javascript開發，您能夠應用在任何的服務端語言環境下，例如：PHP、ASP、ASP.NET、JAVA等。
xhEditor能夠在您的CMS、博客、論壇、商城等互聯網平臺上完美的嵌入運行，可以很是靈活簡單的和您的系統實現完美的無縫銜接。

 

使用xhEditor是以爲它夠小巧，雖然沒有CKEditor控件那麼功能多，但夠用就行；

見下圖，界面頁面引用xheditor-1.1.14-zh-cn.min.js文件就可使用此控件；

 

5.上傳文件控件介紹

參考資料：http://www.cnblogs.com/oec2003/archive/2010/01/06/1640027.html

      Uploadify簡單說來，是基於Jquery的一款文件上傳插件。它的功能特點總結以下：

1.支持單文件或多文件上傳，可控制併發上傳的文件數

2.在服務器端支持各類語言與之配合使用，諸如PHP,.NET,Java……

3.經過參數可配置上傳文件類型及大小限制

4.經過參數可配置是否選擇文件後自動上傳

5.易於擴展，可控制每一步驟的回調函數（onSelect, onCancel……）

6.經過接口參數和CSS控制外觀

 

見下圖，使用EFW控件中封裝的Uploadify開發上傳文件的實例，文件上傳涉及到先後臺的交互，前臺頁面引用swfobject.js文件和jquery.uploadify.v2.1.0.min.js建立上傳的按鈕，選擇文件後點擊上傳，經過指定的Url向後臺控制器發送請求，後臺UploadifyController控制器接收到請求把上傳的文件存入userfiles目錄中；

 

 

      總之，EFW封裝這些Web組件一切都是爲了方便你們，省去本身再花時間來研究各類各樣的Web控件，不是精品是不會整合進來的，因此你們也放心使用。