DataGrid 技巧:行的背景色
如何更改DataGrid中某一行的背景色是一個(gè)被經(jīng)常問的問題。這個(gè)在Flex2.0中很簡單,只需按照下面的步驟做:
1.創(chuàng)建一個(gè)擴(kuò)展自 mx.controls.DataGrid 的類。這個(gè)類可以是MXML文件或者ActionScript文件,你可以根據(jù)自己的習(xí)慣創(chuàng)建。
2.覆寫 protected 方法 drawRowBackground :

程序代碼
override protected function drawRowBackground(s:Sprite, rowIndex:int, y:Number, height:Number, color:uint, dataIndex:int):void
?? {
???????? // 這里可以做一些對數(shù)據(jù)的判斷,然后更改相應(yīng)的顏色。比如color = 0xFF0000;
????????// 調(diào)用super函數(shù)來執(zhí)行更改。
????????super.drawRowBackground(s,rowIndex,y,height,color,dataIndex);
????}
3.在你的程序中用你新建的類替代 <mx:DataGrid>。
在 drawRowBackground 方法中你可以對數(shù)據(jù)做一些判斷。dataIndex 參數(shù)可以用來查看dataProvider 中某一行所顯示的數(shù)據(jù)。例如:假設(shè)你想要將數(shù)值大于1000的行都顯示為綠色:

程序代碼
var item:Object = (dataProvider as ArrayCollection).getItemAt(dataIndex);
if( item.quantity > 1000 ) color = 0x00FF00;
在CFLEX上看到一則小經(jīng)驗(yàn),就是關(guān)于DataGrid控件的方法。如果你不想把DataGrid中的數(shù)據(jù)綁定到控件上的話,你還可以用觸發(fā)事件的方式來處理。你可以使用Click事件,也可以使用Change事件,它們基本上沒有分別,不過不同的是Click事件用的是event.currentTarget,而Change 則是 event.target。例如,現(xiàn)在我們有一個(gè)控件叫someControl,它有一個(gè)text屬性,用來顯示你在DataGrid中選中的信息。如果用click事件,這么寫DataGrid:

引用內(nèi)容
<mx:DataGrid id="DG1" click="clickHandler(event)"/>
然后加入腳本:

引用內(nèi)容
<mx:Script>
??public function clickHandler(event:MouseEvent):void
??{
??????someControl.text = event.currentTarge.selectedItem.someDataField;
??}
</mx:Script>
如果用change事件,這么寫DataGrid和腳本:

引用內(nèi)容
<mx:DataGrid id="DG2" change="changeHandler(event)"/>
?

引用內(nèi)容
<mx:Script>
??public function changeHandler(event:Event):void
??{
??????someControl.text = event.target.selectedItem.someDataField;
??}
</mx:Script>
通過組合框(ComboBox)來過濾DataGrid
?? Flex中一個(gè)很普遍的應(yīng)用就是用組合框(ComboBox)過濾顯示在DataGrid中的數(shù)據(jù)。在這個(gè)技巧里,目的是把一個(gè)“作者” 數(shù)據(jù)庫表里的數(shù)據(jù)顯示到DataGrid里,表的結(jié)構(gòu)如下:
????
程序代碼
authorId : String;
????authorName : String;
????status : String;
??另外,用戶可以選擇ComboBox中包含的不同的作者狀態(tài)的值來過濾DataGrid顯示的作者信息。推薦你把從服務(wù)器請求獲得的結(jié)果轉(zhuǎn)換為ArrayCollection,然后把這個(gè)ArrayCollection作為DataGrid的dataProvider。這樣做你會發(fā)現(xiàn)操作和過濾顯示的數(shù)據(jù)會很變得容易。獲取數(shù)據(jù)超出了現(xiàn)在這個(gè)技巧的范圍,不過關(guān)于這個(gè)問題有很多的例子可以參考。
??首先,把結(jié)果轉(zhuǎn)換為ArrayCollection。
????

程序代碼
import mx.utils.ArrayUtil;
?????? import mx.collections.ArrayCollection;
?????? // event.result contains the data from the authors search.??
?????? public var authorsArray : Array = mx.utils.ArrayUtil.toArray(event.result);
?????? // Use authorsDataProvider as the dataProvider for the dataGrid.
?????? [Bindable]
?????? public var authorsDataProvider : ArrayCollection = new ArrayCollection(authorsArray);
下面是mxml寫的代碼:
????

程序代碼
<mx:DataGrid id="dgAuthors"
???????????????? dataProvider="{ authorsDataProvider }"/>
接下來,把搜索結(jié)果中的作者狀態(tài)值動(dòng)態(tài)加載到ComboBox中。在這里,數(shù)據(jù)庫中可能的作家狀態(tài)值是"Active", "Inactive" 和 "Deleted"。但是在進(jìn)行之前,讓我們來回顧一下用例。我們把搜索作者得到的結(jié)果通過DataGrid視圖向用戶顯示出來,在看過之后,用戶可能希望過濾這些數(shù)據(jù)讓它只顯示“Active”的作者。當(dāng)然,ComboBox中的"Active", "Inactive" 和"Deleted"可以直接硬編碼,但是如果那樣做的話,當(dāng)數(shù)據(jù)庫中添加了一個(gè)新的狀態(tài)值得時(shí)候我們必須修改程序。而且,ComboBox中的值應(yīng)該只包含搜索結(jié)果中的作者狀態(tài),如果搜索結(jié)果只包含狀態(tài)為"Active"和"Inactive"的作者,ComboBox應(yīng)該只包含相應(yīng)的值(沒有”Delete”)。如果所有數(shù)據(jù)庫中可能的作者狀態(tài)值都在ComboBox中硬編碼,用戶就可以選擇”Delete”這個(gè)值,然后就會看到一個(gè)沒有任何數(shù)據(jù)的DataGrid。我們不想困擾用戶,所以接下來的代碼會動(dòng)態(tài)加載作者狀態(tài)值到一個(gè)數(shù)組,然后把這個(gè)數(shù)組作為ComboBox的dataProvider。
????

程序代碼
// Use the authorsStatusArray as the dataProvider for the comboBox.
???? [Bindable]
???? public var authorsStatusArray : Array = populateAuthorsStatusArray(authorsArray);
????public function populateAuthorsStatusArray(authorsArray:Array):Array
???? {
???????????? var statusArrayHashMap : Object = new Object();
????????????????????????????var statusArray : Array = new Array;
??????????????
???????????? var n:int = authorsArray.length;
???????????? for (var i:int = 0; i < n; i++)
???????????? {
??????????????????????????????if (statusArrayHashMap[authorsArray [i].status] == undefined)
??????????????????????????????{
????????????????????????????????????????statusArrayHashMap[authorsArray [i].status] = new Object();
????????????????????????????????????????statusArray.push(authorsArray [i].status);
??????????????????????????????}
??????????????}
???????????? statusArray.sort();
???????????? statusArray.unshift("All");
// The "All" value is used programmatically to un-filter (reset) the result in the dataGrid.??
return statusArray;
???? }
??最后,通過選中的ComboBox中的值來過濾DataGrid顯示的結(jié)果。
??????

程序代碼
public function filterAuthorsGrid():void
?????? {??
?????????????? authorsDataProvider.filterFunction=authorsStatusFilter;
?????????????? authorsDataProvider.refresh();??????????
?????? }
?????? public function authorsStatusFilter(item:Object):Boolean
?????? {
?????????????? if (cboAuthorsStatusFilter.selectedItem != "All")
?????????????? {
?????????????????????? return item.status == cboAuthorsStatusFilter.selectedItem;
?????????????? } else {
????????????????????????return true;
?????????????? }
?????? }
下面是mxml寫的代碼:
??????

程序代碼
<mx:ComboBox id="cboAuthorsStatusFilter"
?????????????? dataProvider="{ authorsStatusArray }"
?????????????? change=" filterAuthorsGrid();"/>
這就是全部的技巧。因?yàn)镈ataGrid的dataProvider利用了綁定(binding),所以當(dāng)用戶在ComboBox中選中了一個(gè)值的時(shí)候,DataGrid會動(dòng)態(tài)顯示過濾后的結(jié)果。請緊記,這只是一個(gè)小技巧而且可能有一些生澀的地方。但是你應(yīng)該可以通過這些代碼領(lǐng)會這種思想。
posted on 2007-02-10 12:38
???MengChuChen 閱讀(715)
評論(0) 編輯 收藏 所屬分類:
flex2.0