FLEX实践—DATAGRID显示行号

DataGrid自动显示行号，网上有很多做法(http://blog.csdn.net/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>

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