【永恒的瞬間】
          ?Give me hapy ?
          DataGrid 技巧:行的背景色



          如何更改DataGrid中某一行的背景色是一個被經常問的問題。這個在Flex2.0中很簡單,只需按照下面的步驟做:

          1.創建一個擴展自 mx.controls.DataGrid 的類。這個類可以是MXML文件或者ActionScript文件,你可以根據自己的習慣創建。

          2.覆寫 protected 方法 drawRowBackground

          程序代碼 程序代碼
          override protected function drawRowBackground(s:Sprite, rowIndex:int, y:Number, height:Number, color:uint, dataIndex:int):void
          ?? {
          ???????? // 這里可以做一些對數據的判斷,然后更改相應的顏色。比如color = 0xFF0000;
          ????????// 調用super函數來執行更改。
          ????????super.drawRowBackground(s,rowIndex,y,height,color,dataIndex);
          ????}



          3.在你的程序中用你新建的類替代 <mx:DataGrid>。

          在 drawRowBackground 方法中你可以對數據做一些判斷。dataIndex 參數可以用來查看dataProvider 中某一行所顯示的數據。例如:假設你想要將數值大于1000的行都顯示為綠色:

          程序代碼 程序代碼
          var item:Object = (dataProvider as ArrayCollection).getItemAt(dataIndex);
          if( item.quantity > 1000 ) color = 0x00FF00;

          CFLEX上看到一則小經驗,就是關于DataGrid控件的方法。如果你不想把DataGrid中的數據綁定到控件上的話,你還可以用觸發事件的方式來處理。你可以使用Click事件,也可以使用Change事件,它們基本上沒有分別,不過不同的是Click事件用的是event.currentTarget,而Change 則是 event.target。例如,現在我們有一個控件叫someControl,它有一個text屬性,用來顯示你在DataGrid中選中的信息。如果用click事件,這么寫DataGrid:

          引用內容 引用內容
          <mx:DataGrid id="DG1" click="clickHandler(event)"/>


          然后加入腳本:

          引用內容 引用內容
          <mx:Script>
          ??public function clickHandler(event:MouseEvent):void
          ??{
          ??????someControl.text = event.currentTarge.selectedItem.someDataField;
          ??}
          </mx:Script>



          如果用change事件,這么寫DataGrid和腳本:

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



          ?

          引用內容 引用內容
          <mx:Script>
          ??public function changeHandler(event:Event):void
          ??{
          ??????someControl.text = event.target.selectedItem.someDataField;
          ??}
          </mx:Script>
          通過組合框(ComboBox)來過濾DataGrid



          ?? Flex中一個很普遍的應用就是用組合框(ComboBox)過濾顯示在DataGrid中的數據。在這個技巧里,目的是把一個“作者” 數據庫表里的數據顯示到DataGrid里,表的結構如下:

          ????

          程序代碼 程序代碼
          authorId : String;
          ????authorName : String;
          ????status : String;


          ??另外,用戶可以選擇ComboBox中包含的不同的作者狀態的值來過濾DataGrid顯示的作者信息。推薦你把從服務器請求獲得的結果轉換為ArrayCollection,然后把這個ArrayCollection作為DataGrid的dataProvider。這樣做你會發現操作和過濾顯示的數據會很變得容易。獲取數據超出了現在這個技巧的范圍,不過關于這個問題有很多的例子可以參考。



          ??首先,把結果轉換為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 }"/>



          接下來,把搜索結果中的作者狀態值動態加載到ComboBox中。在這里,數據庫中可能的作家狀態值是"Active", "Inactive" 和 "Deleted"。但是在進行之前,讓我們來回顧一下用例。我們把搜索作者得到的結果通過DataGrid視圖向用戶顯示出來,在看過之后,用戶可能希望過濾這些數據讓它只顯示“Active”的作者。當然,ComboBox中的"Active", "Inactive" 和"Deleted"可以直接硬編碼,但是如果那樣做的話,當數據庫中添加了一個新的狀態值得時候我們必須修改程序。而且,ComboBox中的值應該只包含搜索結果中的作者狀態,如果搜索結果只包含狀態為"Active"和"Inactive"的作者,ComboBox應該只包含相應的值(沒有”Delete”)。如果所有數據庫中可能的作者狀態值都在ComboBox中硬編碼,用戶就可以選擇”Delete”這個值,然后就會看到一個沒有任何數據的DataGrid。我們不想困擾用戶,所以接下來的代碼會動態加載作者狀態值到一個數組,然后把這個數組作為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顯示的結果。

          ??????

          程序代碼 程序代碼
          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();"/>



          這就是全部的技巧。因為DataGrid的dataProvider利用了綁定(binding),所以當用戶在ComboBox中選中了一個值的時候,DataGrid會動態顯示過濾后的結果。請緊記,這只是一個小技巧而且可能有一些生澀的地方。但是你應該可以通過這些代碼領會這種思想。

          posted on 2007-02-10 12:38 ???MengChuChen 閱讀(722) 評論(0)  編輯  收藏 所屬分類: flex2.0
          主站蜘蛛池模板: 中宁县| 深圳市| 霍州市| 凤台县| 交口县| 平原县| 陵川县| 富宁县| 双峰县| 阿瓦提县| 天祝| 宜兰县| 阜平县| 穆棱市| 巴林右旗| 吉安县| 交口县| 宁蒗| 波密县| 夏河县| 文登市| 临江市| 全州县| 东山县| 台南市| 通江县| 巢湖市| 乌鲁木齐市| 泽库县| 岱山县| 工布江达县| 宜都市| 喀什市| 灵璧县| 淅川县| 沅陵县| 遂宁市| 鲁甸县| 浦北县| 长宁县| 资兴市|