Flex教程/组件详解之一:DataGrid(4)
2010-11-16 09:46
417 查看
今天我们继续讲DataGrid,介绍一下DataGrid中数据的增加/删除/获取。
添加/删除
由于DataGrid的数据都绑定于Array或XML,所以我们需要增加记当或删除记录的时候..只需要对所绑定的数据进行相应的操作即可。这里就不多说了..一会直接看代码。
要提示一下的是..虽然数据与DataGrid进行的绑定.不过好像修改了数据源不会立刻更新..需要DataGrid对数据源进行一次反向操作(就在是DataGrid下进行编辑,下一节会介绍),才会进行更新,所以如果希望立刻更新的话..我们可以再指行一次数据指定..
DataGrid.dataProvider = 数据源
获取
这里所说的获取..是当我们对DataGrid进行的操作(点击项目)的时候..进行所点击的位置索引与数据的获取.
(如果要获取指定第几行,每几列的数据,这样对数据源进行操作即可)
当我们侦听itemClick事件的时候..将会接收到一个ListEvent事件对象..对象里分别有所点击单元格的列索引与列索引,我们就从这两个数据进行其它数据的获取..
(ps:下边提到的e为ListEvent事件对象..)
1.所点击的列的表头
(e.target as DataGrid).columns[e.columnIndex].headerText
2.点击的列索引
e.columnIndex
3.点击的行索引
e.rowIndex
4.点击的整行的数据(选中的数据)
(e.target as DataGrid).selectedItem
5.选中的单元格的数据
(e.target as DataGrid).selectedItem[(e.target as DataGrid).columns[e.columnIndex].dataField]
完整代码:
<?xml version=""1.0""?>
<mx:Application xmlns:mx=""http://www.adobe.com/2006/mxml""
layout=""absolute"" width=""450"" fontFamily=""宋体"" fontSize=""12"" height=""400"">
<mx:Script>
<![CDATA[
import mx.controls.*;
import mx.events.ListEvent;
import mx.controls.dataGridClasses.*;
private var DataGrid1:DataGrid;
[Bindable]//原始数据
public var dataArr:Array = [{id:1,name:""苹果"",count:100},
{id:2,name:""西瓜"",count:200},
{id:3,name:""水蜜桃"",count:50}]
private function addItem():void{
dataArr.push({id:uiId.value,name:uiName.text,count:uiCount.value})
DataGrid2.dataProvider = dataArr
}
private function delItem():void{
dataArr.pop();
DataGrid2.dataProvider = dataArr
}
private function itemClick(e:ListEvent):void{
var txt:String = ""表头为: ""+(e.target as DataGrid).columns[e.columnIndex].headerText+""/n""
txt+=""选中第 ""+e.columnIndex+"" 列/n""
txt+=""选中第 ""+e.rowIndex+"" 行/n""
txt+=""选中的行的数据为:/n""
var dat:Object = (e.target as DataGrid).selectedItem
for(var i:* in dat){
txt+="" ""+i+"":""+dat[i]+""/n""
}
txt+=""选中的单元可格的数据为 ""+(e.target as DataGrid).selectedItem[(e.target as DataGrid).columns[e.columnIndex].dataField]+"" /n""
Alert.show(txt)
}
]]>
</mx:Script>
<mx:DataGrid id=""DataGrid2"" itemClick=""itemClick(event)"" dataProvider=""{dataArr}"" width=""430"" y=""10"" x=""10"" height=""208"">
<mx:columns>
<mx:DataGridColumn headerText=""序号"" dataField=""id""/>
<mx:DataGridColumn headerText=""名称"" dataField=""name""/>
<mx:DataGridColumn headerText=""数量"" dataField=""count"" editorDataField=""value""/>
</mx:columns>
</mx:DataGrid>
<mx:NumericStepper id=""uiId"" x=""10"" y=""241"" width=""150""/>
<mx:TextInput id=""uiName"" x=""10"" y=""288"" width=""150""/>
<mx:NumericStepper id=""uiCount"" x=""10"" y=""335"" width=""150""/>
<mx:Label x=""10"" y=""224"" text=""序号:""/>
<mx:Label x=""10"" y=""271"" text=""名称:""/>
<mx:Label x=""10"" y=""318"" text=""数量:""/>
<mx:Button click=""addItem()"" x=""10"" y=""368"" label=""添加"" width=""150""/>
<mx:Button click=""delItem()"" x=""290"" y=""368"" label=""删除最后一个"" width=""150""/>
</mx:Application>
添加/删除
由于DataGrid的数据都绑定于Array或XML,所以我们需要增加记当或删除记录的时候..只需要对所绑定的数据进行相应的操作即可。这里就不多说了..一会直接看代码。
要提示一下的是..虽然数据与DataGrid进行的绑定.不过好像修改了数据源不会立刻更新..需要DataGrid对数据源进行一次反向操作(就在是DataGrid下进行编辑,下一节会介绍),才会进行更新,所以如果希望立刻更新的话..我们可以再指行一次数据指定..
DataGrid.dataProvider = 数据源
获取
这里所说的获取..是当我们对DataGrid进行的操作(点击项目)的时候..进行所点击的位置索引与数据的获取.
(如果要获取指定第几行,每几列的数据,这样对数据源进行操作即可)
当我们侦听itemClick事件的时候..将会接收到一个ListEvent事件对象..对象里分别有所点击单元格的列索引与列索引,我们就从这两个数据进行其它数据的获取..
(ps:下边提到的e为ListEvent事件对象..)
1.所点击的列的表头
(e.target as DataGrid).columns[e.columnIndex].headerText
2.点击的列索引
e.columnIndex
3.点击的行索引
e.rowIndex
4.点击的整行的数据(选中的数据)
(e.target as DataGrid).selectedItem
5.选中的单元格的数据
(e.target as DataGrid).selectedItem[(e.target as DataGrid).columns[e.columnIndex].dataField]
完整代码:
<?xml version=""1.0""?>
<mx:Application xmlns:mx=""http://www.adobe.com/2006/mxml""
layout=""absolute"" width=""450"" fontFamily=""宋体"" fontSize=""12"" height=""400"">
<mx:Script>
<![CDATA[
import mx.controls.*;
import mx.events.ListEvent;
import mx.controls.dataGridClasses.*;
private var DataGrid1:DataGrid;
[Bindable]//原始数据
public var dataArr:Array = [{id:1,name:""苹果"",count:100},
{id:2,name:""西瓜"",count:200},
{id:3,name:""水蜜桃"",count:50}]
private function addItem():void{
dataArr.push({id:uiId.value,name:uiName.text,count:uiCount.value})
DataGrid2.dataProvider = dataArr
}
private function delItem():void{
dataArr.pop();
DataGrid2.dataProvider = dataArr
}
private function itemClick(e:ListEvent):void{
var txt:String = ""表头为: ""+(e.target as DataGrid).columns[e.columnIndex].headerText+""/n""
txt+=""选中第 ""+e.columnIndex+"" 列/n""
txt+=""选中第 ""+e.rowIndex+"" 行/n""
txt+=""选中的行的数据为:/n""
var dat:Object = (e.target as DataGrid).selectedItem
for(var i:* in dat){
txt+="" ""+i+"":""+dat[i]+""/n""
}
txt+=""选中的单元可格的数据为 ""+(e.target as DataGrid).selectedItem[(e.target as DataGrid).columns[e.columnIndex].dataField]+"" /n""
Alert.show(txt)
}
]]>
</mx:Script>
<mx:DataGrid id=""DataGrid2"" itemClick=""itemClick(event)"" dataProvider=""{dataArr}"" width=""430"" y=""10"" x=""10"" height=""208"">
<mx:columns>
<mx:DataGridColumn headerText=""序号"" dataField=""id""/>
<mx:DataGridColumn headerText=""名称"" dataField=""name""/>
<mx:DataGridColumn headerText=""数量"" dataField=""count"" editorDataField=""value""/>
</mx:columns>
</mx:DataGrid>
<mx:NumericStepper id=""uiId"" x=""10"" y=""241"" width=""150""/>
<mx:TextInput id=""uiName"" x=""10"" y=""288"" width=""150""/>
<mx:NumericStepper id=""uiCount"" x=""10"" y=""335"" width=""150""/>
<mx:Label x=""10"" y=""224"" text=""序号:""/>
<mx:Label x=""10"" y=""271"" text=""名称:""/>
<mx:Label x=""10"" y=""318"" text=""数量:""/>
<mx:Button click=""addItem()"" x=""10"" y=""368"" label=""添加"" width=""150""/>
<mx:Button click=""delItem()"" x=""290"" y=""368"" label=""删除最后一个"" width=""150""/>
</mx:Application>
相关文章推荐
- Flex教程/组件详解之一:DataGrid(1-2)
- Flex教程/组件详解之一:DataGrid
- Flex教程/组件详解之一:DataGrid(3)
- Flex教程/组件详解之一:DataGrid(5)
- Flex教程/组件详解之一:DataGrid(6)
- FLEX如何动态创建DataGrid组件详解
- flex datagrid 添加树2 flex 教程 flex培训 flex源码 flex实例
- Flex4.5之DataGrid表格组件的运用
- Zend Framework入门教程之Zend_Registry组件用法详解
- Flex中DataGrid组件选中某一行的双击事件
- 每天学一点Flex(1):DataGrid组件分页
- 用flash制作SWC文件,生成flex自定义组件【站优教程】
- 【REACT NATIVE 系列教程之一】触摸事件的两种形式与四种TOUCHABLE组件详解
- Flex 3入门教程: 在 MXML 中构建自定义组件
- 【转载】Flex 调用外部JS(中级篇) - Uyang - Photoshop Flash Flex Apollo 教程 组件 开发 源代码
- 取得Flex4 DataGrid组件的当前选中行数据的方法
- Dreamer的FLEX教程翻译:设计松耦合的Flex组件
- Zend Framework教程之视图组件Zend_View用法详解
- Zend Framework入门教程之Zend_Config组件用法详解
- React为 Vue 引入容器组件和展示组件的教程详解