在DataGrid中实现CheckBox

最近在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();
        }
    } 

你可能感兴趣的:(Flex)