Flex 动态datagrid的应用

<!-- [if gte mso 9]><xml> <w:WordDocument> <w:View>Normal</w:View> <w:Zoom>0</w:Zoom> <w:PunctuationKerning/> <w:DrawingGridVerticalSpacing>7.8 磅</w:DrawingGridVerticalSpacing> <w:DisplayHorizontalDrawingGridEvery>0</w:DisplayHorizontalDrawingGridEvery> <w:DisplayVerticalDrawingGridEvery>2</w:DisplayVerticalDrawingGridEvery> <w:ValidateAgainstSchemas/> <w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid> <w:IgnoreMixedContent>false</w:IgnoreMixedContent> <w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText> <w:Compatibility> <w:SpaceForUL/> <w:BalanceSingleByteDoubleByteWidth/> <w:DoNotLeaveBackslashAlone/> <w:ULTrailSpace/> <w:DoNotExpandShiftReturn/> <w:AdjustLineHeightInTable/> <w:BreakWrappedTables/> <w:SnapToGridInCell/> <w:WrapTextWithPunct/> <w:UseAsianBreakRules/> <w:DontGrowAutofit/> <w:UseFELayout/> </w:Compatibility> <w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel> </w:WordDocument> </xml><![endif]--><!-- [if gte mso 9]><xml> <w:LatentStyles DefLockedState="false" LatentStyleCount="156"> </w:LatentStyles> </xml><![endif]--> <!-- /* Font Definitions */ @font-face {font-family:宋体; panose-1:2 1 6 0 3 1 1 1 1 1; mso-font-alt:SimSun; mso-font-charset:134; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:3 680460288 22 0 262145 0;} @font-face {font-family:"\@宋体"; panose-1:2 1 6 0 3 1 1 1 1 1; mso-font-charset:134; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:3 680460288 22 0 262145 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-parent:""; margin:0cm; margin-bottom:.0001pt; text-align:justify; text-justify:inter-ideograph; mso-pagination:none; font-size:10.5pt; mso-bidi-font-size:12.0pt; font-family:"Times New Roman"; mso-fareast-font-family:宋体; mso-font-kerning:1.0pt;} /* Page Definitions */ @page {mso-page-border-surround-header:no; mso-page-border-surround-footer:no;} @page Section1 {size:595.3pt 841.9pt; margin:72.0pt 90.0pt 72.0pt 90.0pt; mso-header-margin:42.55pt; mso-footer-margin:49.6pt; mso-paper-source:0; layout-grid:15.6pt;} div.Section1 {page:Section1;} /* List Definitions */ @list l0 {mso-list-id:645429260; mso-list-type:hybrid; mso-list-template-ids:1330559786 -792669466 67698713 67698715 67698703 67698713 67698715 67698703 67698713 67698715;} @list l0:level1 {mso-level-text:%1）; mso-level-tab-stop:39.0pt; mso-level-number-position:left; margin-left:39.0pt; text-indent:-18.0pt;} @list l1 {mso-list-id:868495315; mso-list-type:hybrid; mso-list-template-ids:464180022 536099640 67698713 67698715 67698703 67698713 67698715 67698703 67698713 67698715;} @list l1:level1 {mso-level-text:%1、; mso-level-tab-stop:39.0pt; mso-level-number-position:left; margin-left:39.0pt; text-indent:-18.0pt;} @list l2 {mso-list-id:1517230120; mso-list-type:hybrid; mso-list-template-ids:-1951217728 -676410782 67698713 67698715 67698703 67698713 67698715 67698703 67698713 67698715;} @list l2:level1 {mso-level-text:%1）; mso-level-tab-stop:39.0pt; mso-level-number-position:left; margin-left:39.0pt; text-indent:-18.0pt;} @list l3 {mso-list-id:1676492127; mso-list-type:hybrid; mso-list-template-ids:423243848 -1060615108 67698713 67698715 67698703 67698713 67698715 67698703 67698713 67698715;} @list l3:level1 {mso-level-text:"%1\)"; mso-level-tab-stop:39.0pt; mso-level-number-position:left; margin-left:39.0pt; text-indent:-18.0pt;} ol {margin-bottom:0cm;} ul {margin-bottom:0cm;} --> <!-- [if gte mso 10]> <style> /* Style Definitions */ table.MsoNormalTable {mso-style-name:普通表格; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-style-noshow:yes; mso-style-parent:""; mso-padding-alt:0cm 5.4pt 0cm 5.4pt; mso-para-margin:0cm; mso-para-margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:10.0pt; font-family:"Times New Roman"; mso-ansi-language:#0400; mso-fareast-language:#0400; mso-bidi-language:#0400;} </style> <![endif]-->

Flex 有 2 种常用的 datagrid ： datagrid 和 advanceddatagrid ，本文指功能更加强大的 advanceddatagrid 。所谓 advanceddatagrid 的动态应用是指，其列数不确定，随着数据源的改变，其列自适应填充（列顺序、列抬头设置、宽度设置等）。

为什么要讨论 datagrid 的动态应用，是因为实际业务当中往往有很多报表其列数是不确定的，这通常是指横向报表。如有张报表是这样的：

年份 月份 产品类别 销售额

2010 6 笔记本 10000 （万元）

2010 6 台式机 20000 （万元）

……

现在要把这张报表横过来，展示如下：

年份 月份 产品类别 1 产品类别 2 产品类别 3…

2010 6 10000 （万元） 20000 （万元） …

此时，其列是随着产品类别数量变动而变动的，即其列是需要动态改变的，虽 Flex 提供了现成的 olapdatagrid 可用，由于其使用不方便、展示慢等原因，简单的动态列报表还是用 advanceddatagrid 来实现，那么如何实现？

<!-- [if !supportLists]-->1、 <!-- [endif]-->约定

<!-- [if !supportLists]-->1) <!-- [endif]-->flex 使用 blazeds 与 java 进行通讯；

<!-- [if !supportLists]-->2) <!-- [endif]-->

<!-- [if !supportLists]-->2、 <!-- [endif]-->在 java 定义一个 flex 的 datagrid 列属性设置类

JavaColDef ，该类有 name 、 text 、 width 等属性，分别表示名称、抬头和宽度；当然为了映射，最好 flex 端定义一个与 JavaColDef 结构一样的 FlexColDef ，并映射到 JavaColDef 。

<!-- [if !supportLists]-->3、 <!-- [endif]-->在 java 端定义一个获取列属性设置的函数

Public JavaColDef[] getDataGridSetting()

该函数返回列属性数组，在数组中的填充顺序即默认为该列在 grid 中的显示顺序。

<!-- [if !supportLists]-->4、 <!-- [endif]-->在 flex 端进行 datagrid 的数据填充处理

假设 flex 执行了查询操作得到了数据集 {dataset} ，当我们得到该数据集的时候，我们立即调用 getDataGridSetting 方法去获取列属性定义。

获取到列属性定义之后，执行表格重建操作。

<!-- [if !supportLists]-->1） <!-- [endif]-->先移除所有列；

<!-- [if !supportLists]-->2） <!-- [endif]-->根据属性列集合，依次给 datagrid 添加列，并设置其属性；

<!-- [if !supportLists]-->3） <!-- [endif]-->绑定数据集 {dataset}

<!-- [if !supportLists]-->5、 <!-- [endif]-->总结

Datagrid 动态列实现，只要进行 2 个操作即可。

<!-- [if !supportLists]-->1） <!-- [endif]-->开发人员自行实现 getDataGridSetting() 函数；

<!-- [if !supportLists]-->2） <!-- [endif]-->数据查询事件处理，查询成功后调用统一函数， void rebuildGrid(array:ArrayCollection) 即可。