flex中datagrid checkbox全选及单选源码

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> <!--如果表格加sortableColumns="false"属性，checkbox状态无法更新--> <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>