flex實(shí)現(xiàn)DataGrid高亮顯示數(shù)據(jù)功能的解決方案
更新時(shí)間:2013年10月14日 17:11:17 作者:
原生的DataGrid根本無法達(dá)到所要的效果,目前一般就是來改寫原生的DataGrid,只需重新寫一個(gè)類來重寫drawRowBackground方法就可以了
flex要高亮數(shù)據(jù)一般可以使用選中效果或者設(shè)置背景,選中效果只能是高亮一條,多條高亮只能設(shè)置背景來達(dá)到效果。但是原生的DataGrid根本無法達(dá)到所要的效果,目前一般就是來改寫原生的DataGrid,只需重新寫一個(gè)類來重寫drawRowBackground方法就可以了,代碼如下
package org.lxh
{
import flash.display.Sprite;
import mx.controls.DataGrid;
public class SpecialDataGrid extends DataGrid
{
private var _rowColorFunction:Function; //用于在外部能通過指定一個(gè)方法 去實(shí)現(xiàn)改變列的背景色
public function SpecialDataGrid()
{
super();
}
public function set rowColorFunction(f:Function):void
{
this._rowColorFunction = f;
}
public function get rowColorFunction():Function
{
return this._rowColorFunction;
}
//復(fù)寫該方法
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);
}
}
}
用的時(shí)候先引入名稱空間 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屬性用來設(shè)置高亮的效果,例如那一列需要高亮,對(duì)應(yīng)的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;
}
到這里效果就做出來了
復(fù)制代碼 代碼如下:
package org.lxh
{
import flash.display.Sprite;
import mx.controls.DataGrid;
public class SpecialDataGrid extends DataGrid
{
private var _rowColorFunction:Function; //用于在外部能通過指定一個(gè)方法 去實(shí)現(xiàn)改變列的背景色
public function SpecialDataGrid()
{
super();
}
public function set rowColorFunction(f:Function):void
{
this._rowColorFunction = f;
}
public function get rowColorFunction():Function
{
return this._rowColorFunction;
}
//復(fù)寫該方法
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);
}
}
}
用的時(shí)候先引入名稱空間 xmlns:control="org.lxh.*",把原來的DataGrid改成下面這樣
復(fù)制代碼 代碼如下:
<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屬性用來設(shè)置高亮的效果,例如那一列需要高亮,對(duì)應(yīng)的function如下
復(fù)制代碼 代碼如下:
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;
}
到這里效果就做出來了
相關(guān)文章
Flex播放器(實(shí)現(xiàn)播放、緩沖進(jìn)度條和音頻曲線顯示)
這篇文章主要介紹了Flex播放器(實(shí)現(xiàn)播放、緩沖進(jìn)度條和音頻曲線顯示),需要的朋友可以參考下2014-07-07Flex彈出窗口請(qǐng)求Action函數(shù)示例
這篇文章主要介紹了Flex彈出窗口請(qǐng)求Action函數(shù),需要的朋友可以參考下2014-05-05Flex中的HDividedBox和VDividedBox的比較附圖
學(xué)習(xí)Flex的朋友對(duì)HDividedBox和VDividedBox并不陌生吧,下面是兩者的簡(jiǎn)單比較,感興趣的朋友可以參考下2013-10-10Flex中TextInput組件設(shè)置限制某些字符的輸入的方法
TextInput組件設(shè)置限制輸入例如限制某個(gè)字符的輸入、設(shè)置只能輸入某些字符等等,下面是具體的示例,喜歡的朋友可以參考下2014-01-01flex利用webservice上傳照片實(shí)現(xiàn)代碼
這篇文章主要介紹了flex利用webservice上傳照片實(shí)現(xiàn)代碼,需要的朋友可以參考下2014-05-05Flex父子窗口相互調(diào)用實(shí)現(xiàn)思路及源碼
這篇文章主要介紹了Flex父子窗口相互調(diào)用實(shí)現(xiàn)思路及源碼,需要的朋友可以參考下2014-05-05Flex打開新窗口將主窗口數(shù)據(jù)傳給子窗口然后返回
主窗口打開子窗口,主窗口有數(shù)據(jù)傳給打開的子窗口,子窗口關(guān)閉時(shí)直接返回主窗口,具體的實(shí)現(xiàn)如下,感興趣的朋友可以參考2013-12-12