[Flex3]Flex DataGrid展现java List对象的三种方式

以下主要是我了解到的<mx:DataGrid 标签中一些属性的使用，希望对正在研究flex的朋友们有点用

 

 

 

 下面是相关说明（java及配置部分省略）

 

 

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    minWidth="955" minHeight="600" backgroundColor="white"
    creationComplete="onComplete()" horizontalAlign="left" layout="vertical"
    verticalAlign="top"  fontSize="12" xmlns:nsl="*">
 <mx:RemoteObject id="userAction" destination="userAction">
 </mx:RemoteObject>
 <mx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
   import mx.controls.Alert;
   import mx.rpc.events.ResultEvent;
   import mx.collections.ArrayList;
   import flash.external.ExternalInterface;
   
   
   [Bindable]   
   public var userArr:Array=new Array();
   
   [Bindable]   
   public var userColls:ArrayCollection=new ArrayCollection();
   
   private function resultHandler(event:ResultEvent):void {
    userColls = event.result as ArrayCollection;
    userArr = userColls.toArray();
    Alert.show(userArr[1].toString(),"Title");
    
   }
   private function onComplete():void{
    userAction.getAllUser();
    userAction.addEventListener(ResultEvent.RESULT,resultHandler);
   }
   
   private function rowNum(oItem:Object,iCol:int):String  
            {  
//              Alert.show(iCol+"----"+oItem);  
               var iIndex:int = userColls.getItemIndex(oItem) + 1;  
               for(var i:int=0;i<userColls.length;i++){  
                    var user:Object=userColls[iIndex-1];  
                    user.num=iIndex+"";  
                }  
                return String(iIndex);  
            }
  ]]>
 </mx:Script>

 <mx:DataGrid id="dataProvider" dataProvider="{userColls}">
  <mx:columns>
   <mx:DataGridColumn  labelFunction="rowNum" headerText="序号"/>//labelFunction对应你想调用的函数，比如说这里是自动为每行生成行号，rowNum为函数名

   <mx:DataGridColumn dataField="userName" headerText="姓名"/> //dataField对应集合中对象属性
   <mx:DataGridColumn dataField="sex" headerText="性别"/>  //headerText对应值随便写
   <mx:DataGridColumn dataField="telephone" headerText="电话"/>
   <mx:DataGridColumn dataField="address" headerText="地址"/>
  </mx:columns>
 </mx:DataGrid>

 

第一种使用dataProvider属性,  userColls为mx.collections.ArrayCollection类型

<mx:DataGrid id="dg" dataProvider="{userColls}">
  <mx:columns>
   <mx:DataGridColumn  labelFunction="rowNum" headerText="序号"/> //labelFunction对应你想调用的函数，比如说这里是自动为每行生成行号，rowNum为函数名
   <mx:DataGridColumn dataField="userName" headerText="姓名"/>
   <mx:DataGridColumn dataField="sex" headerText="性别"/>
   <mx:DataGridColumn dataField="telephone" headerText="电话"/>
   <mx:DataGridColumn dataField="address" headerText="地址"/>
  </mx:columns>
 </mx:DataGrid>

或者在mxml方法中使用dg.dataProvider=userColls来赋值（dg为id）

 ==============================

 

 <mx:DataGrid id="source" >
  <mx:dataProvider>
   <mx:ArrayCollection id="test"  source="{userArr}">
    </mx:ArrayCollection>
  </mx:dataProvider>
  <mx:columns>
   <mx:DataGridColumn  labelFunction="rowNum" headerText="序号"/>
   <mx:DataGridColumn dataField="userName" headerText="姓名"/>
   <mx:DataGridColumn dataField="sex" headerText="性别"/>
   <mx:DataGridColumn dataField="telephone" headerText="电话"/>
   <mx:DataGridColumn dataField="address" headerText="地址"/>
  </mx:columns>
 </mx:DataGrid>

 

第二种使用<mx:ArrayCollection 的source属性，source对应的值必须是和Array相关的类型，如果用这种方式，可以直接把获取到的userColls直接转为Array类型，即userColls.toArray()

============================= 

 

 <mx:DataGrid id="list" >
  <mx:dataProvider>
   <mx:ArrayCollection  list="{userColls}" >
    </mx:ArrayCollection>
  </mx:dataProvider>
  <mx:columns>
   <mx:DataGridColumn  labelFunction="rowNum" headerText="序号"/>
   <mx:DataGridColumn dataField="userName" headerText="姓名"/>
   <mx:DataGridColumn dataField="sex" headerText="性别"/>
   <mx:DataGridColumn dataField="telephone" headerText="电话"/>
   <mx:DataGridColumn dataField="address" headerText="地址"/>
  </mx:columns>
 </mx:DataGrid>
</mx:Application>

第三种方式使用<mx:ArrayCollection 的list属性,list属性对应的值必须是实现或者和IList相关的类型

 

 以上三种最终显示结果一样

 

使用dataProvider属性可以为任意数据类型，api 中对各种数据相应的转换处理

 

API节选

 

 public function set dataProvider(value:Object):void
    {
        if (collection)
        {
            collection.removeEventListener(CollectionEvent.COLLECTION_CHANGE, collectionChangeHandler);
        }

        if (value is Array)
        {
            collection = new ArrayCollection(value as Array);
        }
        else if (value is ICollectionView)
        {
            collection = ICollectionView(value);
        }
        else if (value is IList)
        {
            collection = new ListCollectionView(IList(value));
        }
        else if (value is XMLList)
        {
            collection = new XMLListCollection(value as XMLList);
        }
        else if (value is XML)
        {
            var xl:XMLList = new XMLList();
            xl += value;
            collection = new XMLListCollection(xl);
        }
        else
        {
            // convert it to an array containing this one item
            var tmp:Array = [];
            if (value != null)
                tmp.push(value);
            collection = new ArrayCollection(tmp);
        }
        // get an iterator for the displaying rows.  The CollectionView's
        // main iterator is left unchanged so folks can use old DataSelector
        // methods if they want to
        iterator = collection.createCursor();
        collectionIterator = collection.createCursor(); //IViewCursor(collection);

        // trace("ListBase added change listener");
        collection.addEventListener(CollectionEvent.COLLECTION_CHANGE, collectionChangeHandler, false, 0, true);

        clearSelectionData();

        var event:CollectionEvent = new CollectionEvent(CollectionEvent.COLLECTION_CHANGE);
        event.kind = CollectionEventKind.RESET;
        collectionChangeHandler(event);
        dispatchEvent(event);

        itemsNeedMeasurement = true;
        invalidateProperties();
        invalidateSize();
        invalidateDisplayList();
    }