Solution to implement DataGrid highlighting data function by flex

To highlight data with flex, you can generally use the selected effect or set the background. The selected effect can only be highlighted by one, and multiple highlights can only set the background to achieve the effect. However, the native DataGrid cannot achieve the desired effect at all. At present, it is generally to rewrite the native DataGrid. You only need to rewrite a class to rewrite the drawRowBackground method. The code is as follows

Copy the codeThe code is as follows:

package   
{     
    import ;  
    import ;  
    public class SpecialDataGrid extends DataGrid  
    {  
private var _rowColorFunction:Function;   //Used to change the background color of the column by specifying a method externally.
        public function SpecialDataGrid()  
        {  
            super();  
        }  
        public function set rowColorFunction(f:Function):void  
        {  
            this._rowColorFunction = f;  
        }  
        public function get rowColorFunction():Function  
        {  
            return this._rowColorFunction;  
        }  
//Rewrite this method
        override protected function drawRowBackground(s:Sprite,rowIndex:int,y:Number, height:Number, color:uint, dataIndex:int):void  
        {  
            if(  != null ){  
                if( dataIndex <  ){  
                    var item:Object = (dataIndex);  
                    color = (this, item, color);  
                }  
            }             
            (s, rowIndex, y, height, color, dataIndex);  
        }  
    }  
} 

When using it, first introduce the namespace xmlns:control=".*", and change the original DataGrid to the following

Copy the codeThe code is as follows:

<control:SpecialDataGrid  width="100%"  height="100%"  alternatingItemColors="[0xe3eaf2,0xe8f1f8]" dataProvider="{strArray}" rowColorFunction="colorFunction" doubleClick="planDataGrid_doubleClickHandler(event)" doubleClickEnabled="true">  
                        <control:columns>  
<mx:DataGridColumn dataField="Select" width="50" sortable="false" resizable="false" showDataTips="true">
                                <mx:itemRenderer>  
                                    <fx:Component>  
                                        <mx:CheckBox change="(event)"/>  
                                    </fx:Component>  
                                </mx:itemRenderer>  
                            </mx:DataGridColumn>  
<mx:DataGridColumn dataField="id" headerText="primary key" visible="false"/>

                        </control:columns>  
                    </control:SpecialDataGrid> 

The rowColorFunction property is used to set the highlighting effect. For example, if the column needs to be highlighted, the corresponding function is as follows.

Copy the codeThe code is as follows:

    private function colorFunction(item:Object, color:uint):uint  
    {  
                    var col:uint=0xe3eaf2;  
                    if( > 0){  
                        for(var i:int=0;i<;i++){  
                            if((i).id==){  
                                col=0xF10026;  
                            }  
                        }  
                    }  
                    return col;  

    }  

The effect is made here