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

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

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

       前言：上一章講了EFW框架中的界面框架JqueryEasyUI，在一個(gè)Web系統(tǒng)開發(fā)中除了需要一個(gè)好的界面框架還有需要一些功能，比如：圖表展示、Web報(bào)表預(yù)覽打印、文件上傳、文本編輯等功能在Web系統(tǒng)開發(fā)過程中也是經(jīng)常用到的；為了方便大家使用EFW框架開發(fā)系統(tǒng)，本人對比了網(wǎng)上主流的這些功能，把一些評價(jià)比較好或使用起來比較順手的功能給整合到EFW框架；有圖表控件FusionCharts、報(bào)表控件ReportAll和Grid++Report、上傳控件jquery.uploadify、網(wǎng)頁文本編輯器xheditor；當(dāng)然如果你發(fā)現(xiàn)有更好的控件也可以很方便的加入到EFW框架中。下面我就一一講解這幾個(gè)控件的使用方法及實(shí)現(xiàn)；

本文要點(diǎn)：

1.FusionCharts圖表控件介紹

2.ReportAll報(bào)表控件介紹

3.Grid++Report報(bào)表控件介紹

4.網(wǎng)頁文本編輯器

5.上傳文件控件介紹

源代碼目錄結(jié)構(gòu)：

1.FusionCharts圖表控件介紹

FusionCharts是一個(gè)Flash的圖表組件，它可以用來制作數(shù)據(jù)動畫圖表，其中動畫效果用的是Adobe Flash 8 （原Macromedia Flash的）制作的flash ， FusionCharts可用于任何網(wǎng)頁的腳本語言類似于HTML ， .NET，ASP ， JSP， PHP ， ColdFusion等，提供互動性和強(qiáng)大的圖表。使用XML作為其數(shù)據(jù)接口， FusionCharts充分利用流體美麗的Flash創(chuàng)建緊湊，互動性和視覺逮捕圖表。

FusionCharts確實(shí)功能強(qiáng)大而且效果非常漂亮，但是XML的格式有點(diǎn)復(fù)雜，不同的圖形XML格式也不一樣，做的時(shí)候一定要對照里面的Demo實(shí)例來核對你生成的XML格式；

見下圖，是使用EFW框架開發(fā)的一個(gè)線形圖表，從數(shù)據(jù)庫查出DataTable數(shù)據(jù)，把第一列定義為線形圖表的X軸，第二列定義為Y軸數(shù)據(jù)，把DataTable利用WebFusionChart對象轉(zhuǎn)換為XML，界面代碼通過Ajax請求控制器輸出XML賦值給JS中的FusionCharts對象顯示圖表；界面代碼比較簡單，引用FusionCharts.js文件，調(diào)用相應(yīng)的圖表swf文件；

2.ReportAll報(bào)表控件介紹

      ReportAll是面向軟件開發(fā)人員的報(bào)表開發(fā)工具；她具有全新的設(shè)計(jì)思想。從報(bào)表設(shè)計(jì)的角度看，她完美地融合了“對象擺放”類和“電子表格”類報(bào)表工具的優(yōu)點(diǎn)；從數(shù)據(jù)填報(bào)的角度看，他獨(dú)特的多線程后臺數(shù)據(jù)加載方式，使任意大的數(shù)據(jù)源都可以快速返回，從而實(shí)現(xiàn)邊加載邊瀏覽的效果。

      ReportAll報(bào)表插件全面兼容IE、火狐、Google Chrome 、Opera、傲游、TT等主流瀏覽器。

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

做Web報(bào)表一直沒有找到一個(gè)好的Web報(bào)表組件，以前有用過水晶報(bào)表、Dev中的報(bào)表控件、fineReport等都存在各種原因在EFW框架中使用不合適，水晶報(bào)表太過龐大，Dev報(bào)表控件太難用了，fineReport這個(gè)確實(shí)比較好用但是不是免費(fèi)的；經(jīng)過一番糾結(jié)找了兩個(gè)國產(chǎn)的、輕量級的Web報(bào)表工具ReportAll和Grid++Report；兩個(gè)用起來都非常簡單；

見下圖，使用EFW框架中封裝的ReportAll報(bào)表開發(fā)一張簡單報(bào)表，報(bào)表制作涉及到前后端開發(fā)，前端界面很簡單引用ReportAllPrint.js文件動態(tài)創(chuàng)建報(bào)表對象，再通過Url向后臺控制器請求XML數(shù)據(jù)，后臺使用框架中的WebReportAll對象把DataTable數(shù)據(jù)轉(zhuǎn)換為XML數(shù)據(jù)輸出顯示在界面報(bào)表控件中；

3.Grid++Report報(bào)表控件介紹

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

       Grid++Report 是一款高性能高效率的報(bào)表開發(fā)工具，既可開發(fā)桌面軟件的報(bào)表與打印系統(tǒng)，也可開發(fā)WEB(B/S)軟件的報(bào)表與打印系統(tǒng)。提供一個(gè)具有超強(qiáng)數(shù)據(jù)展現(xiàn)功能的數(shù)據(jù)網(wǎng)格(DataGrid)部件，制作各種表格報(bào)表非常簡便；運(yùn)行時(shí)可通過事件處理使報(bào)表與用戶交互；針對票據(jù)套打進(jìn)行了專門實(shí)現(xiàn)；是開發(fā)動態(tài)報(bào)表的最佳選擇。提供可視化報(bào)表設(shè)計(jì)器，設(shè)計(jì)報(bào)表快速簡單。Grid++Report除了提供打印功能外，還提供獨(dú)有的報(bào)表查詢顯示功能，像各種數(shù)據(jù)網(wǎng)格(DataGrid)控件一樣顯示數(shù)據(jù)，讓報(bào)表的查詢顯示與打印一次實(shí)現(xiàn)，既提高開發(fā)效率又保持?jǐn)?shù)據(jù)的一致性，這也是Grid++Report與其它報(bào)表控件的最大區(qū)別。

在EFW框架中Winform版就使用Grid++Report用來開發(fā)CS報(bào)表，Grid++Report不但支持CS報(bào)表也支持Web報(bào)表開發(fā)，所以框架也把它整合到Web報(bào)表中；就功能上來說Grid++Report應(yīng)該比ReportAll更強(qiáng)大，可以支持在線設(shè)計(jì)報(bào)表格式；使用方式跟上面ReportAll差不多；

見下圖，使用EFW框架中封裝的Grid++Report開發(fā)了一張報(bào)表，前端頁面引用CreateControl.js和GRUtility.js創(chuàng)建報(bào)表對象，通過Url向后臺控制器請求XML格式數(shù)據(jù)，后臺控制器利用框架中的Grid_XMLReportData對象把DataTable數(shù)據(jù)轉(zhuǎn)換為XML數(shù)據(jù)輸出，界面顯示報(bào)表內(nèi)容；

4.網(wǎng)頁文本編輯器

參考資料：http:///

       xhEditor是一個(gè)基于jQuery開發(fā)的簡單迷你并且高效的在線可視化HTML編輯器，基于網(wǎng)絡(luò)訪問并且兼容IE 6.0+,Firefox 3.0+,Opera 9.6+,Chrome 1.0+,Safari 3.22+。
xhEditor完全基于Javascript開發(fā)，您可以應(yīng)用在任何的服務(wù)端語言環(huán)境下，例如：PHP、ASP、ASP.NET、JAVA等。
xhEditor可以在您的CMS、博客、論壇、商城等互聯(lián)網(wǎng)平臺上完美的嵌入運(yùn)行，能夠非常靈活簡單的和您的系統(tǒng)實(shí)現(xiàn)完美的無縫銜接。

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

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

5.上傳文件控件介紹

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

      Uploadify簡單說來，是基于Jquery的一款文件上傳插件。它的功能特色總結(jié)如下：

1.支持單文件或多文件上傳，可控制并發(fā)上傳的文件數(shù)

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

3.通過參數(shù)可配置上傳文件類型及大小限制

4.通過參數(shù)可配置是否選擇文件后自動上傳

5.易于擴(kuò)展，可控制每一步驟的回調(diào)函數(shù)（onSelect, onCancel……）

6.通過接口參數(shù)和CSS控制外觀

見下圖，使用EFW控件中封裝的Uploadify開發(fā)上傳文件的實(shí)例，文件上傳涉及到前后臺的交互，前臺頁面引用swfobject.js文件和jquery.uploadify.v2.1.0.min.js創(chuàng)建上傳的按鈕，選擇文件后點(diǎn)擊上傳，通過指定的Url向后臺控制器發(fā)送請求，后臺UploadifyController控制器接收到請求把上傳的文件存入userfiles目錄中；

      總之，EFW封裝這些Web組件一切都是為了方便大家，省去自己再花時(shí)間來研究各種各樣的Web控件，不是精品是不會整合進(jìn)來的，所以大家也放心使用。