DataGrid组件

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
 
 <!--
 (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]
 -->
 <fx:Script>
  <![CDATA[
   import mx.controls.Alert;
   import mx.events.ListEvent;
   
   private var DataGrid1:DataGrid; 
   [Bindable]//原始数据
   public var dataArr:Array=[
    {id:1,name:"苹果",count:100},
    {id:2,name:"西瓜",count:200},
    {id:3,name:"桃子",count:150},
    {id:4,name:"橘子",count:250}
   ];
   protected function itemClick(event:ListEvent):void
   {
    var txt:String="表头为："+(event.target as DataGrid).columns[event.columnIndex].headerText+"\n"
     txt+="选中第"+event.columnIndex+"列\n"
     txt+="选中第"+event.rowIndex+"行\n" 
     txt+="选中的行的数据为：\n"
      var dat:Object=(event.target as DataGrid).selectedItem
       for(var i:* in dat){
        txt+=" "+i+":"+dat[i]+"\n"
       }
       txt+="选中的单元可格的数据为"+(event.target as DataGrid).selectedItem[(event.target as DataGrid).columns[event.columnIndex].dataField]+"\n"
        Alert.show(txt)
   }
   
   protected function addItem():void
   {
    dataArr.push({id:uiId.value,name:uiName.text,count:uiCount.value}) 
     DataGrid2.dataProvider=dataArr
   }
   
   protected function delItem():void
   {
    dataArr.pop();
    DataGrid2.dataProvider=dataArr
   }
   
  ]]>
 </fx:Script>
 <fx:Declarations>
  <!-- Place non-visual elements (e.g., services, value objects) here -->
 </fx:Declarations>
 
 
 <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" maximum="11"/>
 <s: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"/>
</s:WindowedApplication>