Flex实现DataGrid的序号列

要在Flex的DataGrid里添加序号列，大体上有两种方法：

1.设置DataGridColumn的labelFunction。
其大致的思路是，获取到当前DataGrid的dataProvider及当前行的data，调用getItemIndex方法获取到当前的行的序号。
具体可参考 http://wmcai.blog.163.com/blog/static/480242008111115724283/。这种方法比较直观，也很容易想到。
但重用性很差，其生成序号的labeldFunction无法重用。 
2.设置DataGridColumn的ItemRenderer。
即自定义一个itemRenderer来处理序列号的生成。这种方法重用性很高。至于如何生成序号，这里需要些小技巧。

SequenceItemRenderer.as
 view plaincopy to clipboardprint?01.package com.carnation.component.common   02.{   03.    import mx.collections.IList;   04.    import mx.controls.Label;   05.    import mx.controls.listClasses.BaseListData;   06.    import mx.controls.listClasses.ListBase;   07.    public class SequenceItemRenderer extends Label   08.    {   09.        public function SequenceItemRenderer()   10.        {   11.            super();   12.        }   13.           14.//      另一种方法获取dataProvider并调用getItemIndex方法   15.//      override public function set data(value:Object):void{   16.//          super.data = value;   17.//          text = (((listData.owner as ListBase).dataProvider as IList)   18.//              .getItemIndex(data) + 1).toString();   19.//      }   20.        override public function set listData(value:BaseListData):void{   21.            super.listData = value;   22.            text = ((value.owner as ListBase).itemRendererToIndex(this) + 1).toString();   23.        }   24.    }   25.}  package com.carnation.component.common
{
 import mx.collections.IList;
 import mx.controls.Label;
 import mx.controls.listClasses.BaseListData;
 import mx.controls.listClasses.ListBase;
 public class SequenceItemRenderer extends Label
 {
  public function SequenceItemRenderer()
  {
   super();
  }
  
//  另一种方法获取dataProvider并调用getItemIndex方法
//  override public function set data(value:Object):void{
//   super.data = value;
//   text = (((listData.owner as ListBase).dataProvider as IList)
//    .getItemIndex(data) + 1).toString();
//  }
  override public function set listData(value:BaseListData):void{
   super.listData = value;
   text = ((value.owner as ListBase).itemRendererToIndex(this) + 1).toString();
  }
 }
}

Test.mxml

view plaincopy to clipboardprint?
01.<?xml version="1.0" encoding="utf-8"?> 
02.<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init()"> 
03.    <mx:Script> 
04.        <!--[CDATA[  
05.            import com.carnation.component.common.SequenceItemRenderer;  
06.              
07.            private var indexRenderer:Class = SequenceItemRenderer;  
08.              
09.            private function init():void{  
10.                var array:Array = [];  
11.                for(var i:int = 1; i <= 10; i++){  
12.                    array.push({name:"name"+i.toString()});  
13.                }  
14.                grid.dataProvider = array;  
15.            }  
16.        ]]--> 
17.    </mx:Script> 
18.    <mx:DataGrid id="grid"> 
19.        <mx:columns> 
20.            <mx:DataGridColumn headerText="no" itemRenderer="{new ClassFactory(indexRenderer)}"/> 
21.            <mx:DataGridColumn headerText="name" dataField="name"/> 
22.        </mx:columns> 
23.    </mx:DataGrid> 
24.</mx:Application> 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init()">
 <mx:Script>
  <!--[CDATA[
   import com.carnation.component.common.SequenceItemRenderer;
   
   private var indexRenderer:Class = SequenceItemRenderer;
   
   private function init():void{
    var array:Array = [];
    for(var i:int = 1; i <= 10; i++){
     array.push({name:"name"+i.toString()});
    }
    grid.dataProvider = array;
   }
  ]]-->
 </mx:Script>
 <mx:DataGrid id="grid">
  <mx:columns>
   <mx:DataGridColumn headerText="no" itemRenderer="{new ClassFactory(indexRenderer)}"/>
   <mx:DataGridColumn headerText="name" dataField="name"/>
  </mx:columns>
 </mx:DataGrid>
</mx:Application>
 

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/shirc/archive/2010/01/22/5222363.aspx