Flex利用Datagrid來設定全選和單選

1，效果預覽圖：

<a href="http://blog.51cto.com/attachment/201212/203855954.jpg" target="_blank"></a>

2，設定一個狀态位，用于checkbox的選擇的，從背景擷取的對象集合ArrayCollection。假如其對象為Expert，有屬性mainid，tname，major，depart！有兩個方法設定狀态位。

2.1 在背景給expert對象增加一個屬性，譬如selected，類型為boolean，這樣前台設定checkbox的列就可以用這個字段了

2.2 在前台處理

 protected function getallApp_result(event:ResultEvent):void

   {

    // TODO Auto-generated method stub

    allapplist = event.result as ArrayCollection;

    //初始化全部未選擇

    for(var i:int=0;i&lt;allapplist.length;i++)

    {

     allapplist.getItemAt(i).selected=false;

    }

   }

這裡就是在前台中加一個字段來設定

3，設定一個全局變量，來用于對标題欄上的checkbox做為狀态位處理。

[Bindable]

   public var allSelectCheck:Boolean=false;

4，具體實作如下：

&lt;mx:DataGrid id="appdg" styleName="DataGrid" width="766" height="90%"

         dataProvider="{allapplist}" 

         horizontalScrollPolicy="on" headerStyleName="myHeaderStyles" color="#393939" x="74"&gt;

      &lt;mx:columns&gt;

       &lt;mx:DataGridColumn headerText="選擇"  width="40" sortable="false"&gt;

        &lt;mx:headerRenderer&gt;

         &lt;fx:Component&gt;

          &lt;mx:VBox horizontalAlign="center"&gt;

           &lt;mx:CheckBox selected="{outerDocument.allSelectCheck}"

               click="outerDocument.selectAll(this)" /&gt;

          &lt;/mx:VBox&gt;

         &lt;/fx:Component&gt;

        &lt;/mx:headerRenderer&gt;

        &lt;mx:itemRenderer&gt; 

         &lt;fx:Component&gt; 

          &lt;mx:HBox horizontalAlign="center"&gt;

           &lt;mx:CheckBox selected="{data.selected}" 

               click="data.selected =!data.selected"/&gt;

          &lt;/mx:HBox&gt;

         &lt;/fx:Component&gt; 

        &lt;/mx:itemRenderer&gt;

       &lt;/mx:DataGridColumn&gt;

       &lt;mx:DataGridColumn headerText="項目編号" dataField="appid" width="150"/&gt;

       &lt;mx:DataGridColumn headerText="項目名稱" dataField="appname" width="200"/&gt;

       &lt;mx:DataGridColumn headerText="申請人" dataField="apppeople" width="80"/&gt;

       &lt;mx:DataGridColumn headerText="申請類别" dataField="apptype" width="150"/&gt;

      &lt;/mx:columns&gt;    

     &lt;/mx:DataGrid&gt;

本文轉自 zhao_xiao_long 51CTO部落格，原文連結:http://blog.51cto.com/computerdragon/1094389