DataGrid显示行号

最新推荐文章于 2025-06-06 13:49:56 发布

最新推荐文章于 2025-06-06 13:49:56 发布 · 216 阅读

文章标签：

#Adobe #XML

flex 专栏收录该内容

117 篇文章

订阅专栏

本文介绍如何使用 Flex 的 DataGrid 控件并自定义显示行号的方法。通过重写 labelFunction 函数来实现每行前面显示行号，同时提供了具体的实现代码示例。

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

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:DataGrid  dataProvider="{ac}" id="dg" rowCount="15">
		<mx:columns>
			<mx:DataGridColumn headerText="ddd" dataField="col1"  labelFunction="rowNum" sortable="false"  textAlign="center"  width="48" backgroundColor="#B6BDD2"/>
			<mx:DataGridColumn headerText="Column 2" dataField="col2"/>
			<mx:DataGridColumn headerText="Column 3" dataField="col3"/>
		</mx:columns>
	</mx:DataGrid>
	<mx:Script>
		<![CDATA[
			import mx.controls.dataGridClasses.DataGridColumn;
			import mx.collections.ArrayCollection;
			[Bindable]
			public var ac:ArrayCollection=new ArrayCollection([
			{col1:"222",col2:"2",col3:"asdas"},
			{col1:"1",col2:"3",col3:"asdas"},
			{col1:"3",col2:"2",col3:"ascdas"},
			{col1:"dc",col2:"4",col3:"asdas"},
			{col1:"r5",col2:"5",col3:"ascdas"},
			{col1:"56",col2:"33",col3:"asdas"},
			{col1:"34",col2:"22",col3:"asdas"},
			{col1:"76",col2:"33",col3:"ascddas"},
			{col1:"62",col2:"53",col3:"sdkas"},
			{col1:"89",col2:"65",col3:"sdas"},
			{col1:"90",col2:"77",col3:"smdas"},
			{col1:"98",col2:"66",col3:"sydas"}
			]);
			/**
			 * 返回此item的行号
			 * 
			 */
			public function rowNum(item:Object,column:DataGridColumn):String{
			       var iIndex:int = ac.getItemIndex(item) + 1;
    			        return String(iIndex);
			}
		]]>
	</mx:Script>
</mx:Application>

思路：重写labelFunction函数，此函数包含此行的item，在datagrid的数据源中找到该item的索引位置，索引位置加一就是行号了。