Flex中DataGird的绑定技术的应用

本实例的应用如下：

必须注意点：

1.在datagrid中的数据绑定列为：mx:DataGridColumn  以及格式化DataGrid列中数据的方法的存取的方法

2.绑定非DataGridColumn类的应用

 

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
 <![CDATA[
         import mx.utils.StringUtil;
         import mx.formatters.DateFormatter;
         private var dateFormatter:DateFormatter = new DateFormatter();
         /**
         * 格式化时间
         */
         public function formatStringDate(value:Object, formatString:String="YYYY-MM-DD"):String {
    if (value == null || StringUtil.trim(value.toString()).length <= 0) {
     return "-";
    }
    dateFormatter.formatString = formatString;
    return dateFormatter.format(value);
      }
     
      /**
    * DataGridColulmn格式化日期
    */
   private function formatDate(item:Object,column:DataGridColumn):String{
    if (item[column.dataField] == null) {
     return "-";
    }
    return formatStringDate(item[column.dataField].toString());
   }
 ]]>
</mx:Script>
<mx:XMLList id="flightdg">
 <items>
  <item sid="001" label="CN" startTime="2009-03-06" endTime="2009-03-06" price="25.0"/>
  <item sid="002" label="EN" startTime="2009-03-06" endTime="2009-03-06" price="25.0"/>
  <item sid="003" label="JP" startTime="2009-03-06" endTime="2009-03-06" price="25.0"/>
  <item sid="004" label="AM" startTime="2009-03-06" endTime="2009-03-06" price="25.0"/>
  <item sid="005" label="AF" startTime="2009-03-06" endTime="2009-03-06" price="25.0"/>
 </items>
</mx:XMLList>
<!---

-->
<mx:XMLList id="flightdg0">
 <items>
   <item>
    <sid>
     001
    </sid>
    <label>
     CN
    </label>
    <startTime>
     2009-03-06
    </startTime>
    <endTime>
     2009-03-06
    </endTime>
    <price>
     89.9
    </price>
   </item>
 </items>
</mx:XMLList>

 <mx:Grid>
       <mx:GridRow width="100%">
  <mx:GridItem  >
   <mx:Text text="GridItem" textAlign="center"  />
  </mx:GridItem>
  <mx:GridItem >
   <mx:Text text="GridItem" textAlign="center"  />
  </mx:GridItem>
  <mx:GridItem >
   <mx:Text text="GridItem" textAlign="center" />
  </mx:GridItem>
  <mx:GridItem >
   <mx:Text text="GridItem" textAlign="center" />
  </mx:GridItem>
     </mx:GridRow>
 </mx:Grid>
  <mx:DataGrid dataProvider="{flightdg0.item}" >
  <mx:columns >
  <mx:DataGridColumn headerText="编  号" textAlign="center"  >
          <mx:itemRenderer>
     <mx:Component>
      <mx:LinkButton  label="{data.sid}"  />
     </mx:Component>
    </mx:itemRenderer>
  </mx:DataGridColumn>
   <mx:DataGridColumn headerText="航班名称" dataField="label" textAlign="center" /> 
   <mx:DataGridColumn headerText="起飞时间" dataField="startTime" textAlign="center" />   
   <mx:DataGridColumn  headerText="抵达时间" dataField="endTime"  textAlign="center"  labelFunction="formatDate"/>
   <mx:DataGridColumn headerText="票    价" dataField="price"  textAlign="center" />
  </mx:columns>
 </mx:DataGrid>
 <mx:DataGrid dataProvider="{flightdg.item}" >
  <mx:columns >
  <mx:DataGridColumn headerText="编  号" textAlign="center"  >
          <mx:itemRenderer>
     <mx:Component>

      <!---绑定非DataGirdColumn的应用-->
      <mx:LinkButton  label="{data.@sid}"  />
     </mx:Component>
    </mx:itemRenderer>
  </mx:DataGridColumn>
   <mx:DataGridColumn headerText="航班名称" dataField="@label" textAlign="center" /> 
   <mx:DataGridColumn headerText="起飞时间" dataField="@startTime" textAlign="center" />   
  <!---绑定函数的函数的应用--->

   <mx:DataGridColumn  headerText="抵达时间" dataField="@endTime"  textAlign="center"  labelFunction="formatDate"/>

   <mx:DataGridColumn headerText="票    价" dataField="@price"  textAlign="center" />
  </mx:columns>
 </mx:DataGrid>
</mx:Panel>