FLEX4实践—动态生成DataGrid及应用客户化itemRenderer

应用场景：
1）从后台取到的数据为数组类型，但数据的列名及列个数均是动态的

2）抽取到的数据中有些是DATE类型的，如果直接显示在DataGrid中默认格式很难让用户接受，希望对特殊类型的数据（如日期）进行格式转换处理

 

下面的例子将模拟这一场景：
数据准备：gridColumns1搭配gridProvider1，gridColumns2搭配gridProvider2；两组数据的列名及列个数均不同，其中一组数据包括DATE类型数据。

 

主应用：DynamicGridTest.mxml

<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> <fx:Script> <!--[CDATA[ import components.DynamicGridWin; import mx.managers.PopUpManager; private function showWin1():void{ var newWindow:DynamicGridWin=new DynamicGridWin; newWindow.title="Grid1"; newWindow.gridColumns = gridColumns1; newWindow.gridProvider = gridProvider1; PopUpManager.addPopUp(newWindow, this, true); PopUpManager.centerPopUp(newWindow); } private function showWin2():void{ var newWindow:DynamicGridWin=new DynamicGridWin; newWindow.title="Grid2"; newWindow.gridColumns = gridColumns2; newWindow.gridProvider = gridProvider2; PopUpManager.addPopUp(newWindow, this, true); PopUpManager.centerPopUp(newWindow); } ]]--> </fx:Script> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> <fx:Array id="gridColumns1"> <fx:Object colCode='Name' colType='VARCHAR2'/> <fx:Object colCode='Price' colType='VARCHAR2'/> <fx:Object colCode='StartDate' colType='DATE'/> </fx:Array> <fx:Array id="gridProvider1"> <fx:Object Name="Apple" Price="18" StartDate="{new Date()}"/> <fx:Object Name="Banana" Price="10" StartDate="{new Date(2010,1,3)}"/> </fx:Array> <fx:Array id="gridColumns2"> <fx:Object colCode='Name' colType='VARCHAR2'/> <fx:Object colCode='Class' colType='VARCHAR2'/> </fx:Array> <fx:Array id="gridProvider2"> <fx:Object Name="Apple" Class="1"/> <fx:Object Name="Banana" Class="3"/> </fx:Array> </fx:Declarations> <s:Button x="384" y="155" label="GridWin1" click="showWin1()"/> <s:Button x="532" y="155" label="GridWin2" click="showWin2()"/> </s:Application>

 

组件DynamicGridWin.mxml

<?xml version="1.0" encoding="utf-8"?> <mx:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" width="480" height="300" showCloseButton="true" close="{PopUpManager.removePopUp(this)}" creationComplete="init()"> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> <mx:DateFormatter id="dateFormatter" formatString="YYYY-MM-DD HH:NN:SS"/> <fx:Component id="dateRenderer"> <mx:Text text="{outerDocument.dateFormatter.format(data[outerDocument.gridColumns[outerDocument.index].colCode])}"/> </fx:Component> </fx:Declarations> <fx:Script> <!--[CDATA[ import mx.controls.dataGridClasses.DataGridColumn; import mx.managers.PopUpManager; private var _gridColumns:Array; private var _gridProvider:Array; private var _index:Number; public function set gridColumns(gridColumns:Array):void{ this._gridColumns = gridColumns; } public function get gridColumns():Array{ return this._gridColumns; } public function set gridProvider(gridProvider:Array):void{ this._gridProvider = gridProvider; } public function get gridProvider():Array{ return _gridProvider; } public function set index(index:Number):void{ this._index = index; } public function get index():Number{ return _index; } private function init():void{ initGrid(); initGridData(); } private function initGrid():void{ var cols:Array=datagrid.columns; for (var i:int=0; i < this.gridColumns.length; i++) { index = i; var dgc:DataGridColumn=new DataGridColumn(gridColumns[index].colCode); dgc.headerText=gridColumns[index].nodeColName; dgc.sortable=false; dgc.width= 100; if(gridColumns[i].colType=='DATE') dgc.itemRenderer = dateRenderer; cols.push(dgc); } datagrid.columns=cols; } private function initGridData():void{ this.datagrid.dataProvider = _gridProvider; } ]]--> </fx:Script> <mx:DataGrid id="datagrid" width="100%" height="100%"/> </mx:TitleWindow>

 

注：DynamicGridWin.mxml中的dateRenderer就是用以处理日期格式数据的格式转换，initGrid()实现动态生成表格并根据'ColType'判断是否需要添加itemRenderer进行类型转换显示。

 

演示效果：

GridWin1:

 

GridWin2: