一个具有EXCEL风格的FLEX组件MecGrid

前言：几个月前，因为项目需要探索了MecGrid，后来种种原因没有使用。网上的资料不是很多，特意放上来，有兴趣的一起交流学习。本文主要内容参考自MecGrid作者博客：http://www.mechansp.com/

一、主要特性

可以得到横纵列的索引

支持鼠标滚动

支持分成结构（即树形结构）

单元格自定义样式

同样具备dataProvider功能

导出excel文件格式（AIR专有）

支持过滤功能

单元格拖拽功能

多列排序功能

支持汇总

支持多单元格选中复制

支持动态添加行列

总之，在兼有FLEX DATAGRID特性的基础上，实现了一些EXCEL具有的基本功能。

二、使用方法

１、组件不开源，只能使用obfMecExporter.swc、obfMecGridLib.swc。另外，作者博客上提供了一些不是很详细的API帮助。

２、使用MecGridWizard生成MecGrid脚本，参见manual_mecgrid_wizard.ppt

３、MecGridDemo对上述特性的使用提供了很好的范例。

上述文件全部放置于附件中，其中FLEX工程已使用FLEX BUILDER3+FLEX SDK3.2编译通过，请直接导入，或复制源代码到新建工程。

三、MecGridDemo简述

DataGrid Features

Large data

简述：一个最基本的MecGrid，展示了如何使用MecGrid脚本和对应的随机数据源。

Data Filtering

简述：展示了数据筛选特性，附带展示点选模式、拖拽、汇总特性。

问题：在MecGrid脚本中，直接指定EnableRowFilter="true"无法在运行时看到筛选特性，必须使用EnableRowFilter="{cboShowFilter.selected}"才有效。

Tree View

简述：展示了树型数据，附带展示是否采用电子表格风格（主要体现在添加行列标注）特性。需要注意的是，本例的MecGrid未采用<MecGrid:ResourceXML>脚本，而是由AS代码根据XML树型数据源进行创建的。

Event Viewer

简述：主要展示了不同操作触发的事件。同Tree View，MecGrid也是根据输入行列值动态创建的。

Sorting

简述：主要展示排序特性，包括设置单行排序或多行排序。

DragDrop

简述：行列拖拽、单元格拖拽。

Dynamic Add Row/Col

简述：右键插入行列。在代码中展示了如何设置一个自定义的stylename，再通过监听进而判断是否支持编辑。额外说一下，stylename默认值是”normal”，我们可以在MecGrid的定义中指定属性beginEditCell="editCellHandler(event)"　，再定义函数private function editCellHandler(event:MecGridEvent):void{mgrid.EditCell(event, CellOp.EDIT_TEXT);}即可完成一个支持编辑的MecGrid。也就是说，仅仅在MecGrid定义中指定editable="true"、在column脚本指定editable="T"是不能使MecGrid可编辑的。

Clipboard Copy

简述：右键支持复制功能，顺便展示了selectionmode属性。

OLAP Analysis

Pivoting

简述：展示对OLAP类型数据的处理及如何获取当前MecGrid版本。

SPREADSHEET

SpreadSheet Indexing

简述：对单元格的操控，包括加粗倾斜下划线居中左右对齐字体颜色和简单的公式计算。

Calculator

简述：对列属性的设置。

SUMMARY

Sub totals

Grand totals

简述：汇总，可以调整汇总行位置。

Sample Report

Freeze Row Column

简述：冻结。

Cell Style

简述：针对单元格颜色和边框的设置

Editing Cell

简述：无

Entertainment

Grid MineSweep

简述：扫地雷游戏。

Map

Korea

简述：下载不到com.mechan.map包，无法运行。

四、使用心得

１、关于fixed和merge属性

fixed用来指定需要冻结的行列数，在脚本中以fixedrows="1" fixedcols="2"形式出现，相应的AS代码是mgrid.Rows.fixed=1;mgrid.Cols.fixed=2;这两个属性的默认值都是０。如果在某个column标签中定义了header属性，比如header="Visitors;1st Quater (A)"，那么当fixedrows="1"时，冻结１行，内容为Visitors；当fixedrows="2"时，冻结２行，内容分别为Visitors;1st Quater (A)；当fixedrows="3"或大于３时，冻结相应的行数所占空间，内容仍然为Visitors;1st Quater (A)；

 

merge用来指定合并方式。需要特别注意的是，被fixed冻结的行列和其他行列是需要分别指定合并方式的。merge_option是一个int类型的值，可以是以下几个常量或常量和：

MecGridConst.MERGE_FIXED:int=4;

MecGridConst.MERGE_FREE:int=1;（Merges only if next row value or column value is same）

MecGridConst.MERGE_NONE:int=0;（默认值）

MecGridConst.MERGE_PREV:int=2;（Merges if up cell or right cell is merged）

MecGridConst.MERGE_UNDEFINED:int=5;

比如mgrid.merge_option = MecGridConst.MERGE_FIXED | MecGridConst.MERGE_PREV;

这种指定意味着普通行列采用PREV方式合并，而冻结行列将使用merge_option_fixedcolumn（Merge rules on upper fixed row line）和merge_option_fixedrow（Merge rules on left fixed column line）这两个具体属性进一步指定合并方式，如：

merge_option_fixedcolumn="2" merge_option_fixedrow="0"

相应AS代码是mgrid.merge_option_fixedcolumn=2;mgrid.merge_option_fixedrow=0;

另一个必须注意的是column脚本中的merge="T"或merge="F"，默认为F，相应的AS代码为mgrid.Cols.item(index).merge=true;只有在merge="T"的情况下，merge_option等相关属性的设置才会生效。

评论

16 楼 凌吟儿 2012-04-06  

请教 楼主呀，mecGrid 是否可以打开一个excel 文件？ 刚刚开始学习mecGrid 组件，看了楼主附件中的例子，没有发现可以打开一个excel文件的方法。公司现在有个需求要在浏览器中显示服务器端 poi 产生的excel对象，也就是一个excel文件。查了好多资料，貌似没有这样的flex 组件 ， 是否只能自己写一个flex组件呀

希望多多交流

QQ:370679472

15 楼 langlang 2011-11-28  

mecgrid 基本是不能作为成熟的组件应用到项目的，自己玩玩还可以。
还是自己去实现吧~~~

14 楼 langlang 2011-11-28  

mecgrid 问题挺多的
最近写了2个表格组件 感兴趣的一起探讨下  flex新手 QQ279648954
http://blog.csdn.net/langyuezhang/article/details/7018019
http://blog.csdn.net/langyuezhang/article/details/7017916

13 楼 兰丽(川) 2011-02-24  

兰丽(川) 写道

怎么不能修改列呀？

已经能修改了，感觉也是蛮方便的哦！

12 楼 nulistudio 2011-01-12  

MecGrid缺点确实挺多，而且一些设置不太方便

11 楼 兰丽(川) 2011-01-05  

怎么不能修改列呀？

10 楼 ieRia_chen 2010-11-02  

你好，我用这个组件的时候遇到一些问题，希望与您交流，QQ：583223798

9 楼 qhitsky 2010-06-09  

看起来不错，弄回来研究研究！
多谢分享！

8 楼 ltian 2010-05-19  

这套东西开源吗？什么样的许可协议？

7 楼 tieshow 2010-04-12  

我以前也尝试过，单元格拖拽超卡，直接放弃掉
虽然flex 高级grid单元格拖拽也挺卡，但比这个顺溜多

6 楼 mncc 2010-04-01  

听说如果单元格内内容过多，单元格不会自动缩放放大，是真的吗？如果能解决怎么弄？能否直接生成Excel而不通过其他的代码啊？（比如说后台直接调用java用jxl生成excel）

5 楼 gosin 2010-03-18  

不是开源的。
之前用过一次，后来发现出现问题后，很难进行修改。
很无奈。

4 楼 robyjeffding 2010-03-18  

见图见真相。。。。

3 楼 yunzhongxia 2010-03-18  

MecGrid缺点还是挺多的。

1. 不支持itemrender。
2. 单元格选择时无法获知整行数据。（测试了好一会也没找到解决办法，不知道不能还是我没找出来）
3. 不支持xxxFunction设置。
4. 设置很不方便。在column设置中大量使用 number作为参数，非常非常的不利于使用，在线文档对这个ResourceXML的设置

推荐大家使用Nec Grid，http://yunzhongxia.iteye.com/admin/blogs/613451

2 楼 zxhfounder 2010-03-12  

貌似这个Grid控件的性能不太好，滚动的时候CPU占用率超高

1 楼 dunhuacc12 2010-03-12  

顶鹿哥