`
zhuojb
  • 浏览: 91013 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

一个具有EXCEL风格的FLEX组件MecGrid使用帮助

阅读更多

 

 

本文主要内容参考自MecGrid作者博客:http://www.mechansp.com/

如有错误,欢迎指正,转载请注明出处。

一、主要特性

可以得到横纵列的索引

支持鼠标滚动

支持分成结构(即树形结构)

单元格自定义样式

同样具备dataProvider功能

导出excel文件格式(AIR专有)

支持过滤功能

单元格拖拽功能

多列排序功能

支持汇总

支持多单元格选中复制

支持动态添加行列

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

二、使用方法

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

2、使用MecGridWizard生成MecGrid脚本,参见manual_mecgrid_wizard.ppt

3、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 ViewMecGrid也是根据输入行列值动态创建的。

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包,无法运行。

四、使用心得

1、关于fixedmerge属性

fixed用来指定需要冻结的行列数,在脚本中以fixedrows="1" fixedcols="2"形式出现,相应的AS代码是mgrid.Rows.fixed=1;mgrid.Cols.fixed=2;这两个属性的默认值都是0。如果在某个column标签中定义了header属性,比如header="Visitors;1st Quater (A)",那么当fixedrows="1"时,冻结1行,内容为Visitors;当fixedrows="2"时,冻结2行,内容分别为Visitors;1st Quater (A);当fixedrows="3"或大于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_fixedcolumnMerge rules on upper fixed row line)和merge_option_fixedrowMerge 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等相关属性的设置才会生效。

datatype=4 数字格式  datatype=5字符串格式

 

 

分享到:
评论

相关推荐

    在FLEX中使用MecGrid的excel导出功能

    在FLEX中使用MecGrid的Excel导出...总之,在FLEX中使用MecGrid的Excel导出功能是一个高效且实用的方法,可以帮助开发者提高应用的用户体验。通过熟练掌握MecGrid的API和用法,你可以轻松地处理各种复杂的数据导出需求。

    Flex 组件Flex 组件Flex 组件

    压缩包中的"WordOnLine"可能是一个示例项目,展示了如何使用Flex组件来构建在线文字处理工具。这样的应用可能包括文本编辑、格式化、保存和分享文档等功能。而"ServerObject"可能是与服务器端通信相关的类或服务,...

    flex导出复杂excel

    AdvancedDataGrid导出复杂表头excel

    FLEX3组件的帮助文档

    Flex 3 组件的帮助文档,解压后近4兆。

    Flex中组件datagrid导出Excel

    DataGrid是Flex中常用的一个组件,它用于展示结构化数据,通常用于表格形式的展示。在Flex中,我们可以通过编程方式来实现DataGrid的数据导出,将其中的数据转换成Excel文件。这个过程涉及到的主要知识点包括Flex...

    flex组件介绍

    工具提示是Flex组件的一个重要特性,它允许在用户悬停于某个控件上时显示额外的信息。这有助于增强用户体验,使应用程序更加友好和直观。工具提示可以通过设置控件的`toolTip`属性来实现,该属性可以接受字符串或...

    flex组件详细介绍

    本篇将详细阐述Flex组件的使用及其核心概念,结合示例代码和组件效果图,帮助你快速上手。 一、Flex容器 在Flex布局中,父元素被称为Flex容器,通过设置`display`属性为`flex`或`inline-flex`,可以将其转换为Flex...

    Flex 组件全屏的组件

    这是原始的库了,里面少了一个针对按下ESC键的处理,这个在使用的时候可以自己加,另外一个问题就是由于这个库是FLEX3的,所以在FLEX4.0或以上的版本(使用的spark主题)的时候,需要修改类里面的Canvas为Group或者...

    Flex组件风格预览程序3in1

    Flex组件风格预览程序3in1是一款集合了Flex2和Flex3组件风格预览功能的实用工具,对于学习和理解Flex界面设计具有极大帮助。这个3合1的程序集成了Flex2PrimitiveExplorer、Flex2FilterExplorer和Flex3StyleExplorer_...

    flex mecgrid导出excel工具包

    flex MecExporter(2).swc MecExporter(2).swc

    flex组件LIST使用

    在Flex框架中,`List`组件是用于展示和操作数据集的一个强大工具。根据给定的文件信息,我们可以深入探讨如何在Flex应用中使用`List`组件,以及如何结合脚本进行动态数据处理。 ### 标题:Flex组件LIST使用 #### ...

    flex开源数据控件MecGrid

    Flex开源数据控件MecGrid是一款...总之,MecGrid是Flex开发中的一个强大补充,尤其适合那些需要处理复杂数据展示和交互的项目。其开源特性不仅降低了开发成本,也鼓励了社区的创新与协作,为Flex开发者提供了更多可能。

    flex组件时间轴组件

    时间轴组件作为Flex布局的一个应用,它通常包含一系列的时间点或里程碑,每个时间点都与特定的事件或信息相关联。这些时间点在视觉上表现为线上的标记,而线则代表了时间的流逝。用户可以通过滚动或导航来查看不同...

    flex组件

    标题中的“flex组件”指的是在前端开发中广泛使用的Flex布局技术。Flex布局,全称Flexible Box,是一种用于处理容器中子元素布局的CSS3模块。它允许开发者在不同尺寸的设备上灵活地调整元素的大小和位置,尤其适用于...

    flex air 导出 excel

    1. **服务器端准备**:在服务器端安装Apache POI库,并编写一个接口,该接口接收来自Flex Air的数据并使用POI创建Excel文件。数据应以合适的数据结构(如二维数组)传递,以适应Excel表格的格式。 2. **Flex Air...

    flex Twaver组件使用

    在配置TWaver Flex的开发环境时,首先需要创建一个MXML应用项目,如"HelloTWaver",并将TWaver.swc库文件放入项目的libs目录。Flex Builder 3会自动将此库文件包含进编译路径。用户还可以通过项目设置的Flex Build ...

    Flex各自定义组件事件通讯例子

    1. 组件创建:首先,你需要创建一个新的ActionScript类,继承自Flex的基础组件类,如Spark的SkinnableComponent或MX的Canvas。 2. 组件属性:定义组件的属性,用于设置和获取组件的状态,例如在登录组件中,可能有...

    flex组件,功能强大的下拉框

    在本项目中,我们关注的是一个特定的Flex组件——"功能强大的下拉框"。这个自编的Flex下拉框组件设计用于提供丰富的功能,如多级级联选择,这在数据层级结构复杂的应用场景中尤为有用。 1. **Flex布局基础** Flex...

Global site tag (gtag.js) - Google Analytics