Flex中的DataGrid总结（1）-对数据的操作

最新推荐文章于 2024-11-23 11:12:56 发布

imqipan

最新推荐文章于 2024-11-23 11:12:56 发布

阅读量195

点赞数

CC 4.0 BY-SA版权

分类专栏： flext学习文章标签： Flex

本文链接：https://blog.youkuaiyun.com/imqipan/article/details/83937903

flext学习专栏收录该内容

1 篇文章

订阅专栏

本文深入探讨了使用Flex中的DataGrid控件进行数据操作的方法，包括通过数据源实现数据管理，获取并操作数组或集合的索引，以及如何在DataGrid中嵌套各种组件如复选框等。同时，提供了获取选中数据到另一个DataGrid的具体应用案例。

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

DataGrid是Flex中的一个高级表格控件
[b]1、操作指定数据[/b]
刚开始接触项目中的Flex时，时常为操作DataGrid感到郁闷，因为根本就没办法拿到DataGrid的每一列数据的对象，于是对操作DataGrid的数据就感到麻木了。
:lol: 但这是一种错误的想法，在Flex中操作DataGrid的数据是通过操作数据源来实现的，即是通过其[b]dataProvider[/b]属性来的。
DataGrid中的dataProvider可以由数组或集合进行指定，一旦指定后Flex会遍历其中所有元素，并将其显示在DataGrid里。由此可见，我们操作DataGrid实质还是操作数组或集合。
这么一想，那我们就必须能取得数组（或集合）的索引才能对其进行操作。


<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			[Bindable]
			private var myData:ArrayCollection = new ArrayCollection(
				[{"index":1, "name":"aa", "gender":"男", "age":12},
				{"index":2, "name":"bb", "gender":"男", "age":12},
				{"index":3, "name":"cc", "gender":"男", "age":12},
				{"index":4, "name":"dd", "gender":"男", "age":12},
				{"index":5, "name":"ee", "gender":"男", "age":12} ] );

                         private function showIndex(): void{
                           Alert.show("我的索引是" + data.selectedIndex.toString() );//selectedIndex方法返回当前选中的索引
                         }

</fx:Script>
<mx:DataGrid id="data" dataProvider="{myData}"
					 doubleClickEnabled="true" doubleClick="showIndex(event)"
					 editable="true"
					 >
			<mx:columns>
				<mx:DataGridColumn headerText="序号" dataField="index" editable="false" />
				<mx:DataGridColumn headerText="姓名" dataField="name" />
				<mx:DataGridColumn headerText="性别" dataField="gender" />
				<mx:DataGridColumn headerText="年龄" dataField="age" editable="true" editorDataField="value" >
					<mx:itemEditor>
						<fx:Component>
							<mx:NumericStepper maximum="1000000"  />
						</fx:Component>
					</mx:itemEditor>
				</mx:DataGridColumn>
			</mx:columns>
		</mx:DataGrid>

获取当前索引最典型的应用应该就是复制选中的一行数据吧！
一但拿到索引后，我们可以尽情的更新指定行或指定单元格的数据吧！

//====================华丽的分割线============================================
[b]2、给DataGrid加上其它组件[/b]
刚开始的时候，项目里需要加复选框，当时真是不知所措，但现在看起来也太easy了


<mx:columns>
				<mx:DataGridColumn headerText="选中">
					<mx:itemRenderer>
						<fx:Component>
							<s:CheckBox />
						</fx:Component>
					</mx:itemRenderer>
				</mx:DataGridColumn>
				<mx:DataGridColumn headerText="序号" dataField="index" editable="false" />
				<mx:DataGridColumn headerText="姓名" dataField="name" />
				<mx:DataGridColumn headerText="性别" dataField="gender" />
				<mx:DataGridColumn headerText="年龄" dataField="age" editable="true" editorDataField="value" >
					<mx:itemEditor>
						<fx:Component>
							<mx:NumericStepper maximum="1000000"  />
						</fx:Component>
					</mx:itemEditor>
				</mx:DataGridColumn>
			</mx:columns>