一个具有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等相关属性的设置才会生效。