flexはDataGridの高亮表示データ機能を実現するソリューションです。
flexデータをハイライトするには、選択効果や背景を設定することができます。選択した効果はハイライトだけで、複数のハイライトは背景を設定するだけで効果が得られます。しかし、元のDataGridは必要な効果を達成することができませんでした。現在は基本的に元のDataGridを書き換えに来て、同じ種類を書き換えてdrawRowBackground方法を書き直すだけでいいです。コードは
package org.lxh
{
import flash.display.Sprite;
import mx.controls.DataGrid;
public class SpecialDataGrid extends DataGrid
{
private var _rowColorFunction:Function; //
public function SpecialDataGrid()
{
super();
}
public function set rowColorFunction(f:Function):void
{
this._rowColorFunction = f;
}
public function get rowColorFunction():Function
{
return this._rowColorFunction;
}
//
override protected function drawRowBackground(s:Sprite,rowIndex:int,y:Number, height:Number, color:uint, dataIndex:int):void
{
if( this.rowColorFunction != null ){
if( dataIndex < this.dataProvider.length ){
var item:Object = this.dataProvider.getItemAt(dataIndex);
color = this.rowColorFunction.call(this, item, color);
}
}
super.drawRowBackground(s, rowIndex, y, height, color, dataIndex);
}
}
}
用の時に名前空間xmlns:control=「org.lxh.*」を導入します。元のDataGridを次のように
<control:SpecialDataGrid id="planDataGrid" width="100%" height="100%" alternatingItemColors="[0xe3eaf2,0xe8f1f8]" dataProvider="{strArray}" rowColorFunction="colorFunction" doubleClick="planDataGrid_doubleClickHandler(event)" doubleClickEnabled="true">
<control:columns>
<mx:DataGridColumn dataField=" " width="50" sortable="false" resizable="false" showDataTips="true">
<mx:itemRenderer>
<fx:Component>
<mx:CheckBox change="outerDocument.checkChangeHandlerForPlan(event)"/>
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn dataField="id" headerText=" " visible="false"/>
</control:columns>
</control:SpecialDataGrid>
rowColorFunction属性に変えてハイライトを設定する効果があります。例えば、その列はハイライトが必要です。対応するfunctionは以下のように
private function colorFunction(item:Object, color:uint):uint
{
var col:uint=0xe3eaf2;
if(commonMsg.length > 0){
for(var i:int=0;i<commonMsg.length;i++){
if(commonMsg.getItemAt(i).id==item.id){
col=0xF10026;
}
}
}
return col;
}
からここに来て効果が出ます。