注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

Flex 技术博客

醉里挑灯看剑,梦回吹角连营

 
 
 

日志

 
 

给DataGrid设置背景色(汇总)  

2008-01-08 20:32:30|  分类: Flex 应用 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

DataGrid颜色专题

给DataGrid设置背景色(汇总) - 阿蔡 - Flex 技术博客

Flex运用中经常提到的有关DataGrid问题是如何改变DataGrid单元格(cell),列(column)和行(row)的背景颜色(backgroundcolor)

很久之前就做过这样的总结,一直没有整理出来,现在在这里对这3种颜色做一个总结(后面有demo和源码下载)。

 

  1. 设置行(row)的背景色

主要是通过对DataGrid扩展,对protected函数drawRowBackground()进行重写,具体代码如下:

override protected function drawRowBackground(s:Sprite, rowIndex:int, y:Number, height:Number,color:uint, dataIndex:int):void

{

     if (dataIndex >= dataProvider.length) {

         super.drawRowBackground(s,rowIndex,y,height,color,dataIndex);

         return;

     }

     if (dataProvider.getItemAt(dataIndex).col3 < 2000) {//set color accordint to datas

         super.drawRowBackground(s,rowIndex,y,height,0xC0C0C0,dataIndex);

     } else {

         super.drawRowBackground(s,rowIndex,y,height,color,dataIndex);

     }

} 

这段代码中根据DataGrid的数据源进行判断来设置背景色,但是它有个缺陷,就是这个具体的背景色我们无法自己灵活指定。因此派生出新的CustomRowColorDataGrid,具体代码如下:

package cwmlab.controls

{

      import mx.controls.*;

      import flash.display.Shape;

      import mx.core.FlexShape;

      import flash.display.Graphics;

      import flash.display.Sprite;

      import mx.rpc.events.AbstractEvent;

      import mx.collections.ArrayCollection;

      import flash.events.Event;

 

      /**

       * This is an extended version of the built-in Flex datagrid.

       * This extended version has the correct override logic in it

       * to draw the background color of the cells, based on the value of the

       * data in the row.

       **/

      public class CustomRowColorDataGrid extends DataGrid

      {

            private var _rowColorFunction:Function;

           

            public function CustomRowColorDataGrid()

            {

                  super();

            }

            /**

             * A user-defined function that will return the correct color of the

             * row. Usually based on the row data.

             *

             * expected function signature:

             * public function F(item:Object, defaultColor:uint):uint

             **/

            public function set rowColorFunction(f:Function):void

            {

                  this._rowColorFunction = f;

            }

           

            public function get rowColorFunction():Function

            {

                  return this._rowColorFunction;

            }

           

          /**

             *  Draws a row background

             *  at the position and height specified using the

             *  color specified.  This implementation creates a Shape as a

             *  child of the input Sprite and fills it with the appropriate color.

             *  This method also uses the <code>backgroundAlpha</code> style property

             *  setting to determine the transparency of the background color.

             *

             *  @param s A Sprite that will contain a display object

             *  that contains the graphics for that row.

             *

             *  @param rowIndex The row's index in the set of displayed rows.  The

             *  header does not count, the top most visible row has a row index of 0.

             *  This is used to keep track of the objects used for drawing

             *  backgrounds so a particular row can re-use the same display object

             *  even though the index of the item that row is rendering has changed.

             *

             *  @param y The suggested y position for the background

             *  @param height The suggested height for the indicator

             *  @param color The suggested color for the indicator

             *

             *  @param dataIndex The index of the item for that row in the

             *  data provider.  This can be used to color the 10th item differently

             *  for example.

           */

          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);

          }

      }

}

 

在具体使用过程中可以这样调用:

<cwmlab:CustomRowColorDataGrid dataProvider="{dp}rowColorFunction="setCustomColor">

 

private function setCustomColor(item:Object, color:uint):uint

{

    if( item['col3'] >= 2000 )

    {

        return 0xFF0033;

    }

    return color;

}

  1. 设置DataGrid列的背景色

这个很简单,只要设置DataGridColumn的属性backgroundColor="0x0000CC"即可。

  1. 设置DataGrid单元格(cell)的背景色

这个主要通过itemRenderer进行设置,itemRenderer可以是Label,也可以是其他如DataGridItemRenderer

先看看用Label如何设置背景色

<mx:DataGridColumn headerText="Make" dataField="col1">

      <mx:itemRenderer>

             <mx:Component>

                  <mx:Label>  <!--using label as itemRenderer-->

                      <mx:Script><![CDATA[

                          override public function set data(value:Object):void

                          {

                              super.data = value;

                              if(value.col1 == 'Toyota'){

                                 this.opaqueBackground =0xCC0000;

                              }

                          }

                      ]]></mx:Script>

                  </mx:Label>

             </mx:Component>

      </mx:itemRenderer>

</mx:DataGridColumn>

DataGridItemRenderer进行背景色设置如下:

<mx:DataGridColumn headerText="Year" dataField="col3">

     <mx:itemRenderer>

          <mx:Component>

              <mx:DataGridItemRenderer><!--using DataGridItemRenderer as itemRenderer-->

                   <mx:Script><![CDATA[

                       override public function set data(value:Object):void

                       {

                           super.data = value;

                           if(value.col3 >= 2000){

                                this.background = true;

                                this.backgroundColor =0x00cc00;

                           }

                        }

                   ]]></mx:Script>

              </mx:DataGridItemRenderer>

          </mx:Component>

     </mx:itemRenderer>

</mx:DataGridColumn>

在线查看演示

代码下载:

      给DataGrid设置背景色(汇总) - 阿蔡 - Flex 技术博客

colorDataGrid.zip 

  评论这张
 
阅读(2613)| 评论(6)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017