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-advancedDataGrid-demo,做的datagrid及advanceddatagrid的例子,希望大家喜欢
flex中dataGrid导出数据到excel中,不存在乱码问题
Flex DataGrid从XML文件中加载数据
flex-datagrid中,双击选中的数据,自动把数据移动到另一个datagrid里 希望可以帮助新的新手!
在FLEX4中开发带有过滤功能的DATAGRID组件
datagrid-scrollview-demo
将flex中datagrid组件中数据导出到excel表格中。思路很简单,利用as将datagrid中的数据解析出来,传到后台java服务端处理,即可保存为excel文件。
1 20 跟我StepByStep学FLEX教程------Demo10之DataGrid 1 21 跟我StepByStep学FLEX教程------Flex和Java通信之BlazeDS 1 22 跟我StepByStep学FLEX教程------Flex和Java通信之开发方式和工具准备 1 23 跟我...
效果总结:清除缓存、datagrid列--float型数据四舍五入保留两位及改变背景色及其他等
Flex4 DataGrid表格操作,表格回车事件默认是换行,这里修改为换单元格,单元格轮完换行。支持上下左右和回车键控制光标位置,还添加了"+","-"按钮,用于控制添加行和删除选中的行。
FLEX的datagrid合计、平均值,很好的例子代码拿来就可以用
Flex的DataGrid中使用CheckBox. 大家共同研究
其中包含一个三种状态的checkbox,DataGrid代码中引用了 带多选框的DataGrid(AdvancedDataGrid) 表头有全选CheckBox,三种状态:全选、部分选择、无选择 如果改变目录结构,需要在CustomCheckBox.mxml中更改inner....
简单的一个自定义label.根据dataGrid的数据变色.压缩包里一个是渲染器..一个是主程序....新建一个flex项目...把mxml和文件夹都放在scr下面就可以跑起来了..有问题请回复.
支持datagrid扩展,在一条记录下面可以嵌套一个子datagrid,切记要在页面中引入该js
flex中将dataGrid中的数据导出到excel中,不存在乱码问题
My Flex-DataGrid源码及资料 包含: 1、鼠标右键 2、鼠标双击可编辑 3、插入chechbox控件 4、与数据集的正反绑定
flex 自定义 datagrid 列头带组合框进行过滤
flex 通过读取xml文件 实现动态DataGrid数据列表
绝对好东西,datagrid 标题栏及 datagridcolumn 添加 checkbox