【永恒的瞬间】
☜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 阅读(679) 评论(0)  编辑  收藏 所属分类: flex2.0

只有注册用户登录后才能发表评论。


网站导航: