`
panqili2120
  • 浏览: 88980 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

Flex中的DataGrid总结(1)-对数据的操作

阅读更多
  DataGrid是Flex中的一个高级表格控件
  1、操作指定数据
  刚开始接触项目中的Flex时, 时常为操作DataGrid感到郁闷, 因为根本就没办法拿到DataGrid的每一列数据的对象, 于是对操作DataGrid的数据就感到麻木了。
     但这是一种错误的想法, 在Flex中操作DataGrid的数据是通过操作数据源来实现的, 即是通过其dataProvider属性来的。
  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>


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

//====================华丽的分割线============================================
2、给DataGrid加上其它组件
  刚开始的时候,项目里需要加复选框, 当时真是不知所措,但现在看起来也太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>

主要是itemRenderer属性,用它可以很方便的嵌套各各组件,好了,今天就分享改得到此了, 给大家一个问题哦,怎样在嵌套了复选框的DataGrid中获取所有被选中的数据到另一个DataGrid中呢?欲知详情请 留意下回 《Flex中的DataGrid总结(2)》
分享到:
评论

相关推荐

    Flex DataGrid从XML文件中加载数据

    在Flex编程中,`Flex DataGrid` 是一个用于展示数据集的组件,它允许用户以表格形式查看和操作数据。本示例展示了如何从XML文件加载数据并将其显示在Flex DataGrid中。以下是对该话题的详细解释: 1. **XML数据源**...

    Flex中组件datagrid导出Excel

    总结起来,Flex中组件DataGrid的数据导出至Excel是一项涉及组件操作、数据处理、XML序列化和文件下载等多方面技术的任务。通过理解并掌握这些知识点,开发者可以为用户提供便捷的数据导出功能,提高用户体验。在具体...

    flex datagrid 嵌套checkbox实现全选

    在Flex开发中,数据网格...总结,这个Flex3示例展示了如何在DataGrid中嵌套复选框并实现全选功能,这对于构建交互式的数据管理界面至关重要。通过学习和实践,开发者可以创建更灵活、用户友好的数据操作界面。

    Flex4之DataGrid四个的示例【客户端和服务器端】

    在Flex4中,DataGrid是一个非常重要的组件,它用于显示和操作数据集,通常与服务器端的数据源进行交互。本篇将详细讲解Flex4中的DataGrid组件及其在客户端和服务器端的应用示例,同时也会涉及到Java中的JSON处理,...

    flex组件之DataGrid高级用法实例源码

    在Flex中,DataGrid通常与数据提供者(如 ArrayCollection 或 XML)关联,用于动态展示数据。 二、高级用法详解 1. **自定义列** DataGrid允许我们自定义列的显示样式和行为。例如,可以创建自定义的Column类,...

    Flex中DataGrid和其它控件使用

    总结来说,Flex中的DataGrid和AdvancedDataGrid是强大且灵活的数据展示工具,它们可以与其他多种控件协同工作,满足各种复杂的数据展示和交互需求。理解和掌握这些知识点,将有助于构建高效、用户友好的Flex应用程序...

    Flex的DataGrid导出Excel

    在Flex开发中,DataGrid组件是用于展示数据的常用控件,它允许用户以表格的形式查看和操作数据。而“Flex的DataGrid导出Excel”这个主题涉及到的是如何将DataGrid中的数据显示到Microsoft Excel文件中,以便用户可以...

    flex DataGrid设置dataProvider

    在本文中,我们将深入探讨如何在Flex中设置`DataGrid`的数据提供者(`dataProvider`),以便动态地填充数据。`DataGrid`是Adobe Flex中一个非常重要的组件,它用于显示和操作网格形式的数据。理解如何有效地设置数据...

    Flex DataGrid 改变某一行的背景颜色

    在Flex开发中,DataGrid组件是用于展示结构化数据的强大工具。它允许用户以表格的形式查看和操作数据,常用于创建数据密集型的应用界面。在实际应用中,我们经常需要根据特定条件改变DataGrid中某一行的背景颜色,以...

    flex datagrid doubleclick 实例

    总结来说,本实例涉及了Flex DataGrid的双击事件处理,通过监听`doubleClick`事件,获取选中行的数据,并根据这些数据执行特定的操作。同时,压缩包中的文件可能提供了客户端和服务器端的实现细节,供开发者参考和...

    flex 数据绑定 dataGrid.rar

    在本示例中,我们关注的是如何在Flex中使用数据绑定技术来操作DataGrid组件,这是一个用于展示表格数据的强大工具。DataGrid通常用于显示结构化的数据集合,如数据库记录或XML数据。 在Flex中,数据绑定允许我们...

    flex基于datagrid控件的增删改查及分页实现

    DataGrid控件是Flex中用于展示数据集合的重要组件,特别适用于数据列化显示和操作。 一、Flex DataGrid控件基础 DataGrid控件是Flex中用于展示结构化数据的可视化组件,它可以动态地调整大小以适应其包含的数据。...

    flex Datagrid checkbox全选

    在Flex开发中,Datagrid是一种常用的组件,用于展示表格数据,而checkbox全选功能则是提高用户体验的一个重要特性。本文将详细讲解如何实现Flex Datagrid中checkbox的全选功能。 首先,我们要了解Flex Datagrid的...

    flex通过java后台讲datagrid导出为excel

    总结一下,本场景中的知识点包括Flex的Datagrid组件,使用Java后端处理数据导出,以及Apache POI库在生成Excel文件中的应用。理解这些概念和技术对于开发Flex和Java集成的Web应用,特别是涉及到数据交互和导出的场景...

    flex DataGrid 固定列的位置

    在Flex开发中,DataGrid组件是一个非常常用的控件,它用于展示二维数据表格。当我们处理大量数据时,可能需要让某些关键列始终保持在特定位置,以便用户能够快速访问。标题"flex DataGrid 固定列的位置"正是针对这一...

    Flex DataGrid 插入子组件

    总结,通过在Flex DataGrid中插入子组件,我们可以实现更加灵活和交互丰富的数据展示。无论是简单的按钮,还是复杂的自定义组件,都可以根据需求定制,以满足不同场景下的应用需求。在实际开发中,务必注意性能优化...

Global site tag (gtag.js) - Google Analytics