タイトル
 メニューにないコーナーはTopからいけます
TOP覚え書きFlex → This Page
Flexサンプル

DataGrid 行に行番号表示

サンプル概要

DataGrid の行内に行番号を表示します。

サンプルイメージ

サンプル画像

サンプルソース

単純に DataGridColumn の labelFunction を実装してやるだけで実現できます。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Script>
		<![CDATA[
			import mx.collections.XMLListCollection;
			import mx.controls.dataGridClasses.DataGridColumn;
			
			/** 表示用XML */
			[Bindable]
				private var xmldata:XML =
					<root>
						<List text="AAAAAAAAAA" number="1" />
						<List text="BBBBBBBBBB" number="2" />
						<List text="CCCCCCCCCC" number="3" />
						<List text="DDDDDDDDDD" number="4" />
						<List text="EEEEEEEEEE" number="5" />
					</root>;
			
			[Bindable]
				public var list:XMLListCollection = new XMLListCollection(xmldata.List);
			
			/**
			 * 行番号を表示
			 * 
			 * @param i_item	アイテムオブジェクト
			 * @param i_column	カラム列
			 */
			private function dispRowNum(i_item:Object, i_column:DataGridColumn):String {
				var index:int = list.getItemIndex(i_item) + 1;
				return String(index);
			}
		]]>
	</mx:Script>
	
	<!-- データグリッド -->
	<mx:DataGrid id="dataGrid" x="10" y="10" dataProvider="{list}">
		<mx:columns>
			<mx:DataGridColumn headerText="行番号" labelFunction="dispRowNum"/>
			<mx:DataGridColumn headerText="文字" dataField="@text"/>
			<mx:DataGridColumn headerText="数字" dataField="@number"/>
		</mx:columns>
	</mx:DataGrid>
</mx:Application>


サンプルソースのダウンロード

サンプルのダウンロード(ZIP圧縮)(Flex builder 2 用のプロジェクトファイルも同梱)

更新履歴

2008/04/08 本ページ新規追加


TOP覚え書きFlex → This Page
Valid CSS!