- 浏览: 30592 次
最新评论
1.介绍一下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 {
Alert.show(DataGrid2.columns[0].headerText);
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>
2.Datagrid数据的移动moveData.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:window="com.diaztorres.window.*" xmlns:log="com.log.*">
<mx:Script>
<![CDATA[
import mx.collections.IList;
import mx.collections.ArrayCollection
import mx.controls.Alert;
public function moveUp(event : MouseEvent) : void
{
var i : int = peopleList.selectedIndex;
if (i >= 1&&peopleList.selectedItem)
{
IList(peopleList.dataProvider).addItemAt(peopleList.selectedItem,i-1);
//Alert.show(peopleList.selectedIndex.toString());
IList(peopleList.dataProvider).removeItemAt(i+1);
peopleList.selectedIndex = i;
//Alert.show(i.toString());
}
}
public function moveDown(event : MouseEvent) : void
{
var i : int = peopleList.selectedIndex;
if (i < (ArrayCollection(peopleList.dataProvider).length - 1) && peopleList.selectedItem)
{
IList(peopleList.dataProvider).addItemAt(peopleList.selectedItem,i + 2);
IList(peopleList.dataProvider).removeItemAt(i);
peopleList.selectedIndex = i; }
}
]]>
</mx:Script>
<mx:Array id="arrDP">
<mx:Object c="1" c1="One" />
<mx:Object c="2" c1="One" />
<mx:Object c="3" c1="One" />
</mx:Array>
<mx:VBox horizontalAlign="center" x="618" y="176" height="264">
<mx:DataGrid id="peopleList" dataProvider="{arrDP}" x="198" y="66" width="302">
</mx:DataGrid>
<mx:ControlBar width="298" horizontalAlign="right" height="26">
<mx:Button label="上移" click="moveUp(event)"/>
<mx:Button label="下移" click="moveDown(event)"/>
</mx:ControlBar>
</mx:VBox>
</mx:Application>
3.DataGrid的数据更换感应
<?xml version="1.0" encoding="utf-8"?>
<mx:Application name="DataGrid_maxVerticalScrollPosition_text"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white"
creationComplete="init();">
<mx:Script>
<![CDATA[
import mx.events.CollectionEvent;
private var timer:Timer;
private function init():void {
timer = new Timer(500);
timer.addEventListener(TimerEvent.TIMER, onTimer);
timer.start();
}
private function onTimer(evt:TimerEvent):void {
var now:String = new Date().toTimeString();
arrColl.addItem({id:timer.currentCount, time:now});
}
private function arrColl_collectionChange(evt:CollectionEvent):void {
callLater(autoScrollDataGrid);
}
private function autoScrollDataGrid():void {
if (dataGrid) {
dataGrid.validateNow();
//validateNow () 方法
//验证并更新此对象的属性和布局,
//如果需要的话重绘对象。
//通常只有当脚本执行完毕后,
//才会处理要求进行大量计算的处理属性。
//例如,对 width 属性的设置可能会延迟,
//因为此设置需要重新计算这些对象的子项或父项的宽度。
//如果脚本多次设置了 width 属性,则延迟处理可防止进行多次处理。此方法允许您手动覆盖此行为。
dataGrid.verticalScrollPosition=dataGrid.maxVerticalScrollPosition;//滚动条
}
}
]]>
</mx:Script>
<mx:ArrayCollection id="arrColl"
collectionChange="arrColl_collectionChange(event);" />
<mx:DataGrid id="dataGrid"
dataProvider="{arrColl}"
verticalScrollPolicy="on"
width="200"
rowCount="8">
<mx:columns>
<mx:DataGridColumn dataField="id" width="50" />
<mx:DataGridColumn dataField="time" />
</mx:columns>
</mx:DataGrid>
</mx:Application>
- ScalableAdvancedDataGrid_Design.rar (2.5 MB)
- 下载次数: 3
- ScalableAdvancedDataGrid.rar (2.5 KB)
- 下载次数: 3
- 20120220.zip (131.5 KB)
- 下载次数: 4
发表评论
-
async-threading 让flex支持多线程(转)
2014-07-17 16:57 718开源项目async-threading能使as3支持多线程, ... -
Flex 多图片压缩上传
2014-07-10 15:04 811转自:http://my.oschina.net/eats ... -
Flex AMF Upload Demo
2013-05-05 20:44 881java端:写一个名为ZhuaTuSerlvet的Serl ... -
FXG Test
2012-12-17 23:52 638<?xml version="1.0&q ... -
My Flex Skin
2012-11-23 08:58 87My Flex Skin -
flex DataGrid 表头分组
2012-11-05 08:46 926<mx:AdvancedDataGrid id ... -
AS3分享:FLEX开发者必备的十多个工具
2012-11-01 00:07 612http://as3.aa-a.net/index.php/a ... -
AS3研究TextField心得
2012-10-31 23:41 1544AS3研究TextField心得这两天自己做了texti ... -
Flex efflex 开源库
2012-10-31 00:00 587http://www.efflex.org/FlexEffec ... -
Flex 字体 消除锯齿相关
2012-10-30 23:34 14941. Adobe 官方: 控制 ... -
Flex实用工具
2012-10-26 08:43 57Flex实用工具 -
Flex使用module加载swf,部分组件样式丢失
2012-10-24 15:44 737flex使用module加载swf,部分组件样式丢失(da ... -
My calendar
2012-10-22 14:21 562My calendar design -
使用ObjectUtil来遍历flex as Object对象的所有属性
2012-10-12 10:48 699遍历或者复制一个as 对象所有的属性,可以模仿java使用反射 ... -
AS3 Copy 对象
2012-10-12 10:46 696第一种:public static function clon ... -
AS3 深复制
2012-10-12 10:44 71313.11 深度拷贝一个ArrayCo ... -
flex mvc 架构图
2012-09-25 15:12 624flex mvc 架构图 -
Parsley API
2012-08-16 08:40 721Parsley API -
如何从数组中随机取出多个不重复的项
2012-08-14 17:24 9111.问题如何随机取数组 ... -
随机取数组里的值
2012-08-14 17:11 824怎样随机读取数组中的一个值(两种方法) 方法一: var ...
相关推荐
flex中dataGrid导出数据到excel中,不存在乱码问题
FLEX的datagrid合计、平均值,很好的例子代码拿来就可以用
在FLEX4中开发带有过滤功能的DATAGRID组件
Flex的DataGrid中使用CheckBox. 大家共同研究
flex 自定义 datagrid 列头带组合框进行过滤
Flex4 DataGrid表格操作,表格回车事件默认是换行,这里修改为换单元格,单元格轮完换行。支持上下左右和回车键控制光标位置,还添加了"+","-"按钮,用于控制添加行和删除选中的行。
将flex中datagrid组件中数据导出到excel表格中。思路很简单,利用as将datagrid中的数据解析出来,传到后台java服务端处理,即可保存为excel文件。
Flex4.6 开发的关于DataGrid控件,在其中嵌套了comboBox,控制是否可航编辑,添加删除一行,光表定位,查了好些资料,可直接运行
felx和springHibernate整合传递二进制数据到表中并在flex的dataGrid控件中显示的实践
flex中dataGrid全选和全不选功能
Flex中DataGrid和一些其它控件使用
Flex DataGrid从XML文件中加载数据
Flex FooterSpark DataGrid 高效Flex表格开发技术实例
flex 中datagrid 动态攺变行颜色 用flex3.2打开
flex-datagrid中,双击选中的数据,自动把数据移动到另一个datagrid里 希望可以帮助新的新手!
Flex 自定义DataGrid,带增删改查等各种功能.列锁定,序号等各种功能.
如何改变Flex中DataGrid某一DataGridColumn显示内容的字体颜色
Flex dataGrid 全选、反选 checkBox 不是很完善,但很有借鉴意义
flex中的datagrid的分页定位以及高亮显示
在Flex的DataGrid中使用CheckBox 欢迎分享