FLEX实践—DATAGRID显示行号

本文介绍了一种在DataGrid中自动添加行号的方法,并提供了一个实现该功能的自定义控件示例。通过扩展DataGridColumn控件并利用getItemIndex方法获取每行的索引来实现行号的自动填充。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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>

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值