FLEX实践—DATAGRID显示行号

DataGrid自动显示行号，网上有很多做法(http://blog.youkuaiyun.com/hljlgj/archive/2007/10/10/1819091.aspx 可参考)，我将它写成了一个控件。

DataGridLineNumTest.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
  creationComplete="init()" xmlns:components="components.*">
 <mx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
   private var dg:ArrayCollection = new ArrayCollection();
   private function init():void{
    var item:Object = {name:'A',code:'A1',price:'10'};
    dg.addItem(item);
    var item1:Object = {name:'B',code:'B1',price:'8'};
    dg.addItem(item1);
    var item2:Object = {name:'C',code:'C1',price:'3'};
    dg.addItem(item2);
   }
  ]]>
 </mx:Script>
 <mx:DataGrid x="318" y="71" width="525" height="318" dataProvider="{dg}">
  <mx:columns>
      <components:DataGridNumRender headerText="Line num" dataProvider="{dg}"/>
   <mx:DataGridColumn headerText="Name" dataField="name"/>
   <mx:DataGridColumn headerText="Code" dataField="code"/>
   <mx:DataGridColumn headerText="Price" dataField="price"/>
  </mx:columns>
 </mx:DataGrid>
</mx:Application>

 

controls.DataGridNumRender.mxml (扩展DataGridColumn控件)

<?xml version="1.0" encoding="utf-8"?>
<mx:DataGridColumn xmlns:mx="http://www.adobe.com/2006/mxml" labelFunction="getLineNum">
   <mx:Script>
    <![CDATA[
     import mx.collections.ArrayCollection;
        public var dataProvider:ArrayCollection = new ArrayCollection();
        public var index:Number;
        private function getLineNum(item:Object,num:int):String{
         index = dataProvider.getItemIndex(item)+1;
         return String(index);
        }
    ]]>
   </mx:Script>
</mx:DataGridColumn>

 

运行效果就不贴上来了，有兴趣可以自己试试。