Flex教程DataGrid.docx
《Flex教程DataGrid.docx》由会员分享，可在线阅读，更多相关《Flex教程DataGrid.docx（18页珍藏版）》请在冰豆网上搜索。
Flex教程DataGrid
Flex教程/组件详解之一：
DataGrid（1-2）
今天来介绍一个DataGrid的使用,DataGrid是基于列表的控件,以表格的形式输出数据,可以当他是一个多列的list.
我们将从建立、数据填充、取值、删除、拖拽（?
不晓得有没有打错）等几个方面来详细介绍DataGrid的用法,另外,每个由于当前网上普遍的教程都重在mxml描述进来介绍,忽略了由actionscript操作的相关介绍,所以教程从mxml跟as对比进行介绍:
1.建立DataGrid
2.设置表头
3.数据绑定
4.数据增加/删除/获取
5.DataGrid编辑数据
（1）
6.DataGrid编辑数据
（2）：
itemEditor/itemRenderer
建立DataGrid
我们先来介绍一下建立DataGrid,分别从mxml跟actionscript
mxml
xmlversion=""1.0""?
>
Applicationxmlns:
mx=""
layout=""absolute""width=""600"">
DataGridy=""10""width=""250""right=""10"">
DataGrid>
Application>
actionscript
xmlversion=""1.0""?
>
Applicationinitialize=""init（）""xmlns:
mx=""
layout=""absolute""width=""600"">
Script>
[CDATA[
privatevarDataGrid1:
DataGrid;
privatefunctioninit（）:
void{
DataGrid1=newDataGrid（）
DataGrid1.x=10
DataGrid1.y=30
DataGrid1.width=250
addChild（DataGrid1）
}
]]>
Script>
Application>
上面分别就是由两种方式建立的DataGrid,左边是actionscript右边是mxml,是不是觉得看起来怪怪的.当然~因为空空的~并不是我们常见到的样子..那么我们下面继续设置表头（列）.
设置表头
所谓的表头,其实就是DataGrid的列.我们也从mxml跟actionscript两头进行：
mxml
xmlversion=""1.0""?
>
Applicationxmlns:
mx=""
layout=""absolute""width=""600""fontFamily=""宋体""fontSize=""12"">
DataGridid=""DataGrid2""editable=""true""width=""300""y=""30""right=""10"">
columns>
DataGridColumnheaderText=""序号""dataField=""id""/>
DataGridColumnheaderText=""名称""dataField=""name""/>
DataGridColumnheaderText=""数量""dataField=""count""/>
columns>
DataGrid>
Application>
actionscript
DataGrid自身好像并没有提供设置列的方法,不过我们可以通用新建DataGridColumn,然后添加到DataGrid的columns属性里（ps:
columns就是保存DataGrid列的属性.为DataGridColumn的数组）.
xmlversion=""1.0""?
>
Applicationinitialize=""init（）""xmlns:
mx=""
layout=""absolute""width=""600""fontFamily=""宋体""fontSize=""12"">
Script>
[CDATA[
importmx.controls.*;
importmx.controls.dataGridClasses.*;
privatevarDataGrid1:
DataGrid;
privatefunctioninit（）:
void{
DataGrid1=newDataGrid（）
DataGrid1.x=10
DataGrid1.y=30
DataGrid1.width=275
addChild（DataGrid1）
crColumn（）;//用脚本增加列
}
privatefunctioncrColumn（）:
void{
varcol:
DataGridColumn
col=newDataGridColumn（）
col.headerText=""序号""
col.dataField=""id""
DataGrid1.columns=DataGrid1.columns.concat（col）
col=newDataGridColumn（）
col.headerText=""名称""
col.dataField=""name""
DataGrid1.columns=DataGrid1.columns.concat（col）
col=newDataGridColumn（）
col.headerText=""数量""
col.dataField=""count""
DataGrid1.columns=DataGrid1.columns.concat（col）
}
]]>
Script>
Application>
这里要注意的时.虽然DataGrid.columns为保存列数据的数据,不过我们直接用操作DataGrid.columns将不会进行修改,而必须将修改后的DataGridColumn数组重新赋值给DataGrid,像上面看到的DataGrid1.columns=DataGrid1.columns.concat（col）.
随便说明一下.mxml跟actionscript中出现的headerText,即为表头的文字,而dataField是绑定数据中相关的字段.关于这个,我们将在下节进行说明.
Flex教程/组件详解之一：
DataGrid（3）
上节我们介绍了DataGrid的建立与设置表头,今天我们介绍一下DataGrid中重要的功能数据绑定（dataProvider）.
DataGrid.的数据源技术多种数据格式.XML,Array,Model,我们分别说一下Array跟XML（Model跟XML类似）.
数组（Array）形式的数据源.常用在数据源为写程序的时候已经设定好.非外部加载时比较多（外部加载一般为xml）
[Bindable]
publicvardataArr:
Array=[{id:
1,name:
""苹果"",count:
100},
{id:
2,name:
""西瓜"",count:
200},
{id:
3,name:
""水蜜桃"",count:
50}]
这里随便介绍一下[Bindable],他的作用是把数据设置为可绑定...
看一下完成代码.我们在（1-2）节的文件上继续~
xmlversion=""1.0""?
>
Applicationinitialize=""init（）""xmlns:
mx=""
layout=""absolute""width=""600""fontFamily=""宋体""fontSize=""12"">
Script>
[CDATA[
importmx.controls.*;
importmx.controls.dataGridClasses.*;
privatevarDataGrid1:
DataGrid;
[Bindable]
publicvardataArr:
Array=[{id:
1,name:
""苹果"",count:
100},
{id:
2,name:
""西瓜"",count:
200},
{id:
3,name:
""水蜜桃"",count:
50}]
privatefunctioninit（）:
void{
DataGrid1=newDataGrid（）
DataGrid1.x=10
DataGrid1.y=30
DataGrid1.width=275
addChild（DataGrid1）
crColumn（）;//用脚本增加列
DataGrid1.dataProvider=dataArr
}
privatefunctioncrColumn（）:
void{
varcol:
DataGridColumn
col=newDataGridColumn（）
col.headerText=""序号""
col.dataField=""id""
DataGrid1.columns=DataGrid1.columns.concat（col）
col=newDataGridColumn（）
col.headerText=""名称""
col.dataField=""name""
DataGrid1.columns=DataGrid1.columns.concat（col）
col=newDataGridColumn（）
col.headerText=""数量""
col.dataField=""count""
DataGrid1.columns=DataGrid1.columns.concat（col）
}
]]>
Script>
DataGridid=""DataGrid2""dataProvider=""{dataArr}""width=""275""y=""30""right=""10"">
columns>
DataGridColumnheaderText=""序号""dataField=""id""/>
DataGridColumnheaderText=""名称""dataField=""name""/>
DataGridColumnheaderText=""数量""dataField=""count""editorDataField=""value""/>
columns>
DataGrid>
Labelx=""440""y=""10""text=""mxml""/>
Labelx=""104""y=""10""text=""actionscript""/>
Application>
绑定数据时必要注意的是.列中必须与数据中相应的字段（dataField）.
另外,如果我们在没有设置列的情况下绑定数据.DataGrid将会根据数据的属性和生相应的列.并以属性名为表头.
像上面的代码我们把
//crColumn（）;//用脚本增加列
屏蔽了
并把mxml中的columns>节点
--mx:
columns>
DataGridColumnheaderText=""序号""dataField=""id""/>
DataGridColumnheaderText=""名称""dataField=""name""/>
DataGridColumnheaderText=""数量""dataField=""count""/>
columns-->
进行上面的注释,执行后将看到下边的效果.（注意看表头）
XML格式的数据般为外部加载而来,通用用来显示从数据库等查询后的数据.
[Bindable]
publicvardataArr:
XML=
苹果
西瓜
水蜜桃
xml跟数据的操作差不多..也是直接设置dataProvider即可..不过这里我们要传进去的不是dataArr,应该是dataArr.item,并且把相关的dataField进行修改~（注意dataField的区别,属性在这里应该使用""@属性名"",熟悉xml的朋友都了解,我就不多读说了）
xmlversion=""1.0""?
>
Applicationinitialize=""init（）""xmlns:
mx=""
layout=""absolute""width=""600""fontFamily=""宋体""fontSize=""12"">
Script>
[CDATA[
importmx.controls.*;
importmx.controls.dataGridClasses.*;
privatevarDataGrid1:
DataGrid;
[Bindable]
publicvardataArr:
XML=
苹果
西瓜
水蜜桃
privatefunctioninit（）:
void{
DataGrid1=newDataGrid（）
DataGrid1.x=10
DataGrid1.y=30
DataGrid1.width=275
addChild（DataGrid1）
crColumn（）;//用脚本增加列
DataGrid1.dataProvider=dataArr.item
}
privatefunctioncrColumn（）:
void{
varcol:
DataGridColumn
col=newDataGridColumn（）
col.headerText=""序号""
col.dataField=""@id""
DataGrid1.columns=DataGrid1.columns.concat（col）
col=newDataGridColumn（）
col.headerText=""名称""
col.dataField=""name""
DataGrid1.columns=DataGrid1.columns.concat（col）
col=newDataGridColumn（）
col.headerText=""数量""
col.dataField=""@count""
DataGrid1.columns=DataGrid1.columns.concat（col）
}
]]>
Script>
DataGridid=""DataGrid2""dataProvider=""{dataArr.item}""
width=""275""y=""30""right=""10"">
columns>
DataGridColumnheaderText=""序号""dataField=""@id""/>
DataGridColumnheaderText=""名称""dataField=""name""/>
DataGridColumnheaderText=""数量""dataField=""@count""editorDataField=""value""/>
columns>
DataGrid>
Labelx=""440""y=""10""text=""mxml""/>
Labelx=""104""y=""10""text=""actionscript""/>
Application>
Flex教程/组件详解之一：
DataGrid（4）
今天我们继续讲DataGrid,介绍一下DataGrid中数据的增加/删除/获取。
添加/删除
由于DataGrid的数据都绑定于Array或XML,所以我们需要增加记当或删除记录的时候..只需要对所绑定的数据进行相应的操作即可。
这里就不多说了..一会直接看代码。
要提示一下的是..虽然数据与DataGrid进行的绑定.不过好像修改了数据源不会立刻更新..需要DataGrid对数据源进行一次反向操作（就在是DataGrid下进行编辑,下一节会介绍）,才会进行更新,所以如果希望立刻更新的话..我们可以再指行一次数据指定..
DataGrid.dataProvider=数据源
获取
这里所说的获取..是当我们对DataGrid进行的操作（点击项目）的时候..进行所点击的位置索引与数据的获取.
（如果要获取指定第几行，每几列的数据，这样对数据源进行操作即可）
当我们侦听itemClick事件的时候..将会接收到一个ListEvent事件对象..对象里分别有所点击单元格的列索引与列索引,我们就从这两个数据进行其它数据的获取..
（ps:
下边提到的e为ListEvent事件对象..）
1.所点击的列的表头
（e.targetasDataGrid）.columns[e.columnIndex].headerText
2.点击的列索引
e.columnIndex
3.点击的行索引
e.rowIndex
4.点击的整行的数据（选中的数据）
（e.targetasDataGrid）.selectedItem
5.选中的单元格的数据
（e.targetasDataGrid）.selectedItem[（e.targetasDataGrid）.columns[e.columnIndex].dataField]
完整代码:
xmlversion=""1.0""?
>
Applicationxmlns:
mx=""
layout=""absolute""width=""450""fontFamily=""宋体""fontSize=""12""height=""400"">
Script>
[CDATA[
importmx.controls.*;
importmx.events.ListEvent;
importmx.controls.dataGridClasses.*;
pr
升级会员 