最近在flex项目中,实现了该功能,share下:
xxxx.mxml
<mx:DataGrid id="overViewDataGrid" width="100%" height="100%" rowCount="5" dataProvider="{_dataProvider}" itemClick="showDetailInfo()"> <mx:columns> <component:TCheckBoxColumn width="25" id="checkBoxColumn" draggable="false" resizable="false" sortable="false" headerRenderer="{new ClassFactory(TCheckBoxHeaderRender)}" itemRenderer="{new ClassFactory(TCheckBoxItemRender)}" > </component:TCheckBoxColumn> <mx:DataGridColumn headerText="Name" labelFunction="formatName"/> <mx:DataGridColumn headerText="IP Address" labelFunction="formatIP"/> <mx:DataGridColumn headerText="Running" labelFunction="formatOS"/> <mx:DataGridColumn headerText="Confidence" labelFunction="formatConfidence"/> </mx:columns> </mx:DataGrid>
TCheckBoxHeaderRender.as:
public class TCheckBoxHeaderRender extends TCheckBox{ private var _data:TCheckBoxColumn; private var column:TCheckBoxColumn; private var dg:DataGrid; private var dgDataArr:ArrayCollection; public function TCheckBoxHeaderRender(){ super(); this.showMiddle = true; this.addEventListener(Event.CHANGE,onChange); } override public function get data():Object{ return _data; } override public function set data(value:Object):void{ _data = value as TCheckBoxColumn; selected = _data.cloumnSelected; } private function onChange(event:Event):void{ dg = DataGrid(listData.owner); column = dg.columns[listData.columnIndex]; dgDataArr = dg.dataProvider as ArrayCollection; column.cloumnSelected = this.selected; column.selectItems = new Array(); checkButtonState(); dgDataArr.refresh(); } private function checkButtonState():void { if(this.selected){ column.selectItems = (dg.dataProvider as ArrayCollection).toArray(); if(column.isDisable){ column.canRemove = false; }else { column.canRemove = true; } }else { column.canRemove = false; } if(dgDataArr.length>0){ if(dgDataArr[0]!=""){ for(var i:int = 0; i < dgDataArr.length ; i++){ Object(dgDataArr[i]).isSelected = this.selected; if(dgDataArr.length==1&&this.selected&&!column.isDisable){ column.canEdit = true; }else{ column.canEdit = false; } } } } } }
TCheckBoxItemRender.as:
public class TCheckBoxItemRender extends TCheckBox{ private var currentData:Object; private var model:TModelLocator = TModelLocator.getInstance(); public function TCheckBoxItemRender(){ super(); this.showMiddle = true; this.addEventListener(MouseEvent.CLICK,onClickCheckBox); this.addEventListener(Event.CANCEL,onClickCheckBox); } override public function set data(value:Object):void{ this.selected = value.isSelected; this.currentData = value; } private function onClickCheckBox(e:Event):void{ var dg:DataGrid = DataGrid(listData.owner); var column:TCheckBoxColumn = dg.columns[listData.columnIndex]; this.currentData.isSelected = this.selected; if(this.selected){ column.selectItems.push(this.currentData); }else{ for(var i:int = 0; i<column.selectItems.length; i++){ if(column.selectItems[i] == this.currentData){ column.selectItems.splice(i,1) } } } if(column.isDisable) { column.canRemove = false; column.canEdit =false; }else{ if(column.selectItems.length==1) { column.canRemove = true; column.canEdit = true; }else if(column.selectItems.length>1) { column.canEdit = false; column.canRemove = true; }else { column.canEdit = false; column.canRemove = false; } } changeCheckBoxHeader(); } private function changeCheckBoxHeader():void{ var dg:DataGrid = DataGrid(listData.owner); var dgDataArr:ArrayCollection = dg.dataProvider as ArrayCollection; var totalColumnSize:int =dgDataArr.length; var allSelected=true; var selectColumnArr:Array = dg.columns[0].selectItems; var selectColumnSize:int = selectColumnArr.length; if(selectColumnSize!=totalColumnSize){ allSelected = false; } var headerColumn :TCheckBoxColumn = dg.columns[0]; if(allSelected){ headerColumn.cloumnSelected=true; }else{ headerColumn.cloumnSelected=false; } dgDataArr.refresh(); } }