回《【开源】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控件，不是精品是不会整合进来的，所以大家也放心使用。

二十三、【开源】EFW框架Web前端开发之常用组件（FusionCharts图表、ReportAll报表等）相关推荐

二十四、【开源】EFW框架Winform前端开发之项目结构说明和调试方法
回<[开源]EFW框架系列文章索引> EFW框架源代码下载V1.2:http://pan.baidu.com/s/1hcnuA EFW框架实例源代码下载:http://pan.baidu. ...
关于前端开发中常用组件封装的一些思考、技巧分享，基本上所有的项目都适用
看过了大多数文章,都是讲解的知识点,但知识点的话我们很容易查询各种文档.书籍了解到,但实用的技巧就很难, 需要自己工作有一定的经历,经常封装各种组件,思考才能得来.本文的讲解是我本人真实的项目经历总结 ...
web前端开发常用的10个高端CSS UI开源框架
随着人们对体验的极致追求,web页面设计也面临着新的挑战,不仅需要更人性化的设计理念,还需要设计出更酷炫的页面.作为web前端开发人员,运用开源资源,更快更好地实现一些现代化的界面,是必备技能之一.下 ...
听说优秀的Web前端开发工程师都会用这几个工具！
Web前端入行门槛低.薪资待遇高.市场需求大,是很多人进入IT行业的首选语言.工欲善其身必先利器,作为初学前端行业的小白,如果知道一些好用的软件工具可以帮助他们更好的工作.下面,就给大家分享Web前端 ...
Web前端开发常用必备工具（一）
一个称手的工具可谓是事半功倍,对程序员来说,更是离不开各种各样的实用小工具,你现在的工具用的还称手吗?你还在为没有好用的工具而发愁吗? 蓉妹儿在这里给你分享一些Web前端开发的常用必备工具,还没安装的 ...
支付宝前端团队整理的《Web 前端开发入门手册》
[回复"1024",送你一个特别推送] 今天是元宵节,首先祝大家元宵节快乐.但是,我万万没想到的是,一个元宵节现在都能成为我们程序猿的节日,名曰:猿宵节. 真的是越来越佩服我们程序 ...
Web前端开发学习3：SEO代码优化
一代码优化概述关于代码优化的知识是纯理论的知识,学习的很枯燥.在学到CSS时,不免遇到CSS+div进行代码优化的知识,因此在网上看了一些关于这方面的知识,简单的整合一下,梳理自己所了解的代码优化 ...
Web前端开发必不可少的10个开源框架
作为一名前端开发人员,持续学习是必备的技能之一.随着新技术的不断涌现,前端开发框架越来越多,各种框架现.版本的更新此起彼伏. 前端领域的技术不断更迭,让人眼花缭乱.面对这么多框架,我们应该如何选择?接 ...
Delphi Web应用开发B/S框架推荐：《Delphi Web前端开发教程——基于TMS WEB Core框架》
使用TMS WEB Core 发现Delphi软件开发的无限潜能-- 二十多年来,编程语言Delphi 以对 Windows 应用程序的快速可视化编程而闻名于世.尤其是轻松开发桌面数据库应用程序和快捷 ...

二十三、【开源】EFW框架Web前端开发之常用组件（FusionCharts图表、ReportAll报表等）