在Flex中动态生成DataGrid 动态的改变表头

最新推荐文章于 2015-06-08 01:11:16 发布

最新推荐文章于 2015-06-08 01:11:16 发布 · 204 阅读

文章标签：

#Flex #XML

Flex 专栏收录该内容

0 篇文章

订阅专栏

本文介绍了一个使用Flex实现的DataGrid控件示例，该控件能够根据数据源动态改变表头。通过自定义数据源及DataGridColumn，实现表头的动态生成。

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

[b]Flex中的DataGrid控件无法根据数据源动态的改变表头
下面一个简单的实例实现了表头的动态改变。[/b]



<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="init()">
	<mx:Script>
		<![CDATA[
			import mx.controls.dataGridClasses.DataGridColumn;
			import mx.collections.ArrayCollection;
			import mx.controls.DataGrid;
			import mx.events.ListEvent;
			import mx.controls.ComboBox;
			[Bindable]
                           //  自定义数据源   
			private var dgDataArr:Array = [{name: "Jon", job: "officer",addnew:'aaaa'},
				{name: "James", job: "seller",addnew:'bbbb'},
				{name: "Jodon", job: "manager",addnew:'cccc'},
				{name: "Jon", job: "officer",addnew:'aaaa'},
				{name: "Jon", job: "officer",addnew:'aaaa'},
				{name: "Jon", job: "officer",addnew:'aaaa'}];

			private function init():void
			{
				var dgData:ArrayCollection = new ArrayCollection(dgDataArr);
				dgData.filterFunction
                                    // 自定义DataGrid控件
				var dataGrid:DataGrid = new DataGrid();
				dataGrid.x = 10; // X轴坐标
				dataGrid.y = 20; // Y轴坐标
				dataGrid.editable = false; // 数据项是否能编辑
				dataGrid.percentWidth  = 100; // 控件宽度
				dataGrid.percentHeight = 100; // 控件高度
				dataGrid.setStyle("fontSize", 14);
				dataGrid.styleName
				dataGrid.dataProvider = dgData; // 设置数据源
				dataGrid.addEventListener(ListEvent.ITEM_CLICK, itemClickHandler); // 添加监听事件类型与触发函数
				addChild(dataGrid); // 添加dataGrid控件

				var columns:Array = new Array();
				var col:DataGridColumn;
				for ( var i:* in dgDataArr[0] ) {
					col = new DataGridColumn(i);
					columns.push(col);
				}
				dataGrid.columns = columns;

			}
			private function itemClickHandler(e:ListEvent):void
			{
				trace(e.target);
			}
		]]>
	</mx:Script>
</mx:Application>