数据表格全选和取消全选功能

flex的数据表格没有全选和取消全选功能，因此我们必须自己“创造”一个。

主要是编写通过头部渲染器（必须继承CheckBox），复写set data方法，编写头部渲染器点击响应函数，将头部的sortable改成false（否则DataGrid将启动排序功能）。下面是应用程序和头部渲染器代码：

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()" xmlns:myDataGrid="myDataGrid.*"> <mx:Script> <![CDATA[ import mx.collections.ArrayCollection; [Bindable] private var arr:ArrayCollection; //获得所选的选项 private var selectedItems:ArrayCollection; private function init():void { arr=new ArrayCollection([{name: 'sd', age: 34, link: false}, {name: 'kjh', age: 43, link: false}, {name: 'sdssd', age: 87, link: false}]); selectedItems=new ArrayCollection(); } private function showSelectedItems(e:MouseEvent):void{ var s:String = ""; for(var i:int=0;i<dp.dataProvider.length;i++){ if(arr[i].link){ selectedItems.addItem(arr[i]); s+=arr[i].name+'/n'; } } selectedItemText.text=s; } ]]> </mx:Script> <mx:DataGrid horizontalCenter="0" verticalCenter="0" id="dp" dataProvider="{arr}"> <mx:columns> <mx:DataGridColumn headerText="name" dataField="name"/> <mx:DataGridColumn headerText="age" dataField="age"/> <mx:DataGridColumn headerRenderer="CheckBoxHeaderRenderer" sortable="false" dataField="link" textAlign="center"> <mx:itemRenderer> <mx:Component> <mx:CheckBox change="data.link=selected"/> </mx:Component> </mx:itemRenderer> </mx:DataGridColumn> </mx:columns> </mx:DataGrid> <mx:Button label="查看选中项" click="showSelectedItems(event)" x="529" y="142"/> <mx:TextArea x="35" y="218" height="141" id="selectedItemText"/> <myDataGrid:MyDataGrid id="dp2" dataProvider="{arr}"> <myDataGrid:columns> <mx:DataGridColumn headerText="age" dataField="age"/> </myDataGrid:columns> </myDataGrid:MyDataGrid> </mx:Application>

package { import flash.events.MouseEvent; import mx.collections.ArrayCollection; import mx.controls.CheckBox; import mx.controls.DataGrid; import mx.controls.dataGridClasses.DataGridColumn; import mx.controls.dataGridClasses.DataGridListData; import mx.events.DataGridEvent; public class CheckBoxHeaderRenderer extends CheckBox { public function CheckBoxHeaderRenderer() { super(); this.selected=false; this.addEventListener(MouseEvent.CLICK,clickHandler); } private var _data:DataGridColumn; override public function get data():Object { return _data; } override public function set data(value:Object):void { _data = value as DataGridColumn; label = DataGridListData(listData).label + " as plain text"; // DataGrid(listData.owner).addEventListener(DataGridEvent.HEADER_RELEASE, sortEventHandler); var dataGrid:DataGrid=DataGrid(listData.owner); var arr:ArrayCollection=dataGrid.dataProvider as ArrayCollection; var flag:Boolean=true; for(var i:int=1;i<arr.length;i++){ if(arr.getItemAt(i)["link"]==false){ flag=false; } } selected = flag; } private function sortEventHandler(event:DataGridEvent):void { if (event.itemRenderer == this) event.preventDefault(); } override protected function clickHandler(event:MouseEvent):void { super.clickHandler(event); var dataGrid:DataGrid=DataGrid(listData.owner); var arr:ArrayCollection=dataGrid.dataProvider as ArrayCollection; for(var i:int=0;i<arr.length;i++){ arr.getItemAt(i)["link"]=CheckBoxHeaderRenderer(event.target).selected; } arr.refresh(); dataGrid.dataProvider=arr; /* if (selected) data.setStyle("plainText", true); else data.setStyle("plainText", false); */ // DataGrid(listData.owner).invalidateList(); } } }