flex中datagrid checkbox全选及单选源码

来源：互联网发布：一贯道知乎编辑：程序博客网时间：2024/05/26 15:59

flex中datagrid checkbox全选及单选源码

<?xml version="1.0" encoding="utf-8"?>

<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="632" height="300" showCloseButton="true">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.collections.ArrayCollection;

public var data1:ArrayCollection = new ArrayCollection([{id:1,city:'重庆',person:5000},{id:2,city:'北京',person:8000},{id:3,city:'成都',person:52300}]);
public var data2:ArrayCollection = new ArrayCollection();
public var allstate:Boolean = false;
//全选
public function doselectAll(event:MouseEvent):void
{
data2.removeAll();
allstate = event.target.selected;
for each (var item in datagrid1.dataProvider) {
item.selected = allstate;
if(item.selected){
data2.addItem(item);
}
}
datagrid2.dataProvider.refresh();
}
//单选
public function doselect(){
data2.removeAll();
for each (var item in datagrid1.dataProvider) {
if(item.selected){
data2.addItem(item);
}

}
}

]]>
</mx:Script>

<mx:DataGrid x="39" y="55" id="datagrid1" dataProvider="{data1}" width="228" >
<mx:columns>

<mx:DataGridColumn headerText="" dataField="id">
<mx:headerRenderer>
<mx:Component>
  <mx:HBox verticalAlign="middle">
   <mx:CheckBox toolTip="全选" selected="{outerDocument.allstate}" click="outerDocument.doselectAll(event)"/>
  </mx:HBox>
</mx:Component>
</mx:headerRenderer>
<mx:itemRenderer>
<mx:Component>
  <mx:HBox verticalAlign="middle">
   <mx:Script>
<![CDATA[
protected function cb_change_handler(event:Event):void
{
data.selected = !data.selected; //当点击checbox时，改变checked属性状态
}
]]>
</mx:Script>
<mx:CheckBox selected="{data.selected}" click="outerDocument.doselect()" change="cb_change_handler(event)"/>
  </mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="编号" dataField="id"/>
<mx:DataGridColumn headerText="城市" dataField="city"/>
<mx:DataGridColumn headerText="人数" dataField="person"/>
</mx:columns>
</mx:DataGrid>
<mx:DataGrid id="datagrid2" x="275" y="55" width="234" dataProvider="{data2}">
<mx:columns>
<mx:DataGridColumn headerText="编号" dataField="id"/>
<mx:DataGridColumn headerText="城市" dataField="city"/>
<mx:DataGridColumn headerText="人数" dataField="person"/>
</mx:columns>
</mx:DataGrid>
</mx:TitleWindow>

0 0