Flex中的DataGrid的内容处理(总结)

转贴：http://blog.sina.com.cn/s/blog_5c4558600100ejo1.html

 

1.介绍一下DataGrid中数据的增加/删除/获取。

添加/删除
由于DataGrid的数据都绑定于Array或XML,所以我们需要增加记当或删除记录的时候..只需要对所绑定的数据进行相应的操作即可。这里就不多说了..一会直接看代码。
要提示一下的是..虽然数据与DataGrid进行的绑定.不过好像修改了数据源不会立刻更新..需要DataGrid对数据源进行一次反向操作(就在是 DataGrid下进行编辑,下一节会介绍),才会进行更新,所以如果希望立刻更新的话..我们可以再指行一次数据指定..
DataGrid.dataProvider = 数据源

获取
这里所说的获取..是当我们对DataGrid进行的操作(点击项目)的时候..进行所点击的位置索引与数据的获取.
(如果要获取指定第几行，每几列的数据，这样对数据源进行操作即可)

当我们侦听itemClick事件的时候..将会接收到一个ListEvent事件对象..对象里分别有所点击单元格的列索引与列索引,我们就从这两个数据进行其它数据的获取..
(ps:下边提到的e为ListEvent事件对象..)
1.所点击的列的表头
(e.target as DataGrid).columns[e.columnIndex].headerText
2.点击的列索引
e.columnIndex
3.点击的行索引
e.rowIndex
4.点击的整行的数据(选中的数据)
(e.target as DataGrid).selectedItem
5.选中的单元格的数据
(e.target as DataGrid).selectedItem[(e.target as DataGrid).columns[e.columnIndex].dataField]
完整代码:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="450" fontFamily="宋体" fontSize="12" height="400">
<mx:Script>
<![CDATA[
import mx.controls.*;
import mx.events.ListEvent;
import mx.controls.dataGridClasses.*;
private var DataGrid1:DataGrid;

[Bindable]//原始数据
public var dataArr:Array = [{id:1,name:"苹果",count:100},
{id:2,name:"西瓜",count:200},
{id:3,name:"水蜜桃",count:50}]

private function addItem():void{
        dataArr.push({id:uiId.value,name:uiName.text,count:uiCount.value})
        DataGrid2.dataProvider = dataArr
}
private function delItem():void{
        dataArr.pop();
        DataGrid2.dataProvider = dataArr
}
private function itemClick(e:ListEvent):void {
Alert.show(DataGrid2.columns[0].headerText);
   var txt:String = "表头为: "+(e.target as DataGrid).columns[e.columnIndex].headerText+"\n"
   txt+="选中第 "+e.columnIndex+" 列\n"
   txt+="选中第 "+e.rowIndex+" 行\n"
   txt+="选中的行的数据为:\n"
   var dat:Object = (e.target as DataGrid).selectedItem
   for(var i:* in dat){
     txt+="　"+i+":"+dat[i]+"\n"
   }
   txt+="选中的单元可格的数据为 "+(e.target as DataGrid).selectedItem[(e.target as DataGrid).columns[e.columnIndex].dataField]+" \n"
   Alert.show(txt)
   }
]]>
</mx:Script>

<mx:DataGrid id="DataGrid2" itemClick="itemClick(event)" dataProvider="{dataArr}" width="430" y="10" x="10" height="208">
<mx:columns>
<mx:DataGridColumn headerText="序号" dataField="id"/>
<mx:DataGridColumn headerText="名称" dataField="name"/>
<mx:DataGridColumn headerText="数量" dataField="count" editorDataField="value"/>
</mx:columns>
</mx:DataGrid>
<mx:NumericStepper id="uiId" x="10" y="241" width="150"/>
<mx:TextInput id="uiName" x="10" y="288" width="150"/>
<mx:NumericStepper id="uiCount" x="10" y="335" width="150"/>
<mx:Label x="10" y="224" text="序号："/>
<mx:Label x="10" y="271" text="名称："/>
<mx:Label x="10" y="318" text="数量："/>
<mx:Button click="addItem()" x="10" y="368" label="添加" width="150"/>
<mx:Button click="delItem()" x="290" y="368" label="删除最后一个" width="150"/>
</mx:Application>

 

2.Datagrid数据的移动moveData.mxml

 

<?xml version="1.0" encoding="utf-8"?>   
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:window="com.diaztorres.window.*" xmlns:log="com.log.*">   
<mx:Script>   
    <![CDATA[   
       import mx.collections.IList;     
       import mx.collections.ArrayCollection   
       import mx.controls.Alert;         
       public function moveUp(event : MouseEvent) : void  
        {                    
           var i : int = peopleList.selectedIndex;
            
          if (i >= 1&&peopleList.selectedItem)   
           {                
          
             IList(peopleList.dataProvider).addItemAt(peopleList.selectedItem,i-1);
              //Alert.show(peopleList.selectedIndex.toString());                     
             IList(peopleList.dataProvider).removeItemAt(i+1);   
             peopleList.selectedIndex = i;   
                         //Alert.show(i.toString());
            }   
        }   
           
       public function moveDown(event : MouseEvent) : void  
        {   
        var i : int = peopleList.selectedIndex;         
       if (i < (ArrayCollection(peopleList.dataProvider).length - 1) && peopleList.selectedItem)   
        {                
           IList(peopleList.dataProvider).addItemAt(peopleList.selectedItem,i + 2);                     
                IList(peopleList.dataProvider).removeItemAt(i);      
                peopleList.selectedIndex = i;                }               
        }                       
         ]]>   
     </mx:Script> 
      <mx:Array id="arrDP">
        <mx:Object c="1" c1="One" />
        <mx:Object c="2" c1="One" />
        <mx:Object c="3" c1="One" />
</mx:Array>  
     <mx:VBox horizontalAlign="center" x="618" y="176" height="264">      
     <mx:DataGrid id="peopleList"  dataProvider="{arrDP}"  x="198" y="66" width="302">   
          
     </mx:DataGrid>   
     <mx:ControlBar width="298" horizontalAlign="right" height="26">   
         <mx:Button label="上移" click="moveUp(event)"/>   
         <mx:Button label="下移" click="moveDown(event)"/>   
     </mx:ControlBar>       
</mx:VBox>   
</mx:Application>

 

3.DataGrid的数据更换感应

<?xml version="1.0" encoding="utf-8"?>
<mx:Application name="DataGrid_maxVerticalScrollPosition_text"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">
 
    <mx:Script>
        <![CDATA[
            import mx.events.CollectionEvent;
            private var timer:Timer;
 
            private function init():void {
                timer = new Timer(500);
                timer.addEventListener(TimerEvent.TIMER, onTimer);
                timer.start();
            }
 
            private function onTimer(evt:TimerEvent):void {
                var now:String = new Date().toTimeString();
                arrColl.addItem({id:timer.currentCount, time:now});
            }
 
            private function arrColl_collectionChange(evt:CollectionEvent):void {
                callLater(autoScrollDataGrid);
            }
 
            private function autoScrollDataGrid():void {
                if (dataGrid) {
                    dataGrid.validateNow();

//validateNow () 方法  
                    //验证并更新此对象的属性和布局，
                    //如果需要的话重绘对象。
                    //通常只有当脚本执行完毕后，
                    //才会处理要求进行大量计算的处理属性。
                    //例如，对 width 属性的设置可能会延迟，
                    //因为此设置需要重新计算这些对象的子项或父项的宽度。
                    //如果脚本多次设置了 width 属性，则延迟处理可防止进行多次处理。此方法允许您手动覆盖此行为。
                    dataGrid.verticalScrollPosition=dataGrid.maxVerticalScrollPosition;//滚动条

                }
            }
        ]]>
    </mx:Script>   
    <mx:ArrayCollection id="arrColl"
            collectionChange="arrColl_collectionChange(event);" />   
    <mx:DataGrid id="dataGrid"
            dataProvider="{arrColl}"
            verticalScrollPolicy="on"
            width="200"
            rowCount="8">
        <mx:columns>
            <mx:DataGridColumn dataField="id" width="50" />
            <mx:DataGridColumn dataField="time" />
        </mx:columns>
    </mx:DataGrid> 
</mx:Application>