Flex教程DataGridWord文档下载推荐.docx

Flex教程DataGridWord文档下载推荐.docx

《Flex教程DataGridWord文档下载推荐.docx》由会员分享，可在线阅读，更多相关《Flex教程DataGridWord文档下载推荐.docx（12页珍藏版）》请在冰豆网上搜索。

"

1.0"

>

mx:

Applicationxmlns:

mx="

layout="

absolute"

width="

600"

DataGridy="

10"

250"

right="

/mx:

DataGrid>

Application>

actionscript

Applicationinitialize="

init（）"

xmlns:

Script>

!

[CDATA[

privatevarDataGrid1:

DataGrid;

privatefunctioninit（）:

void{

DataGrid1=newDataGrid（）

DataGrid1.x=10

DataGrid1.y=30

DataGrid1.width=250

addChild（DataGrid1）

}

]]>

上面分别就是由两种方式建立的DataGrid,左边是actionscript右边是mxml,是不是觉得看起来怪怪的.当然~因为空空的~并不是我们常见到的样子..那么我们下面继续设置表头（列）.

设置表头

所谓的表头,其实就是DataGrid的列.我们也从mxml跟actionscript两头进行：

fontFamily="

宋体"

fontSize="

12"

DataGridid="

DataGrid2"

editable="

true"

300"

y="

30"

columns>

DataGridColumnheaderText="

序号"

dataField="

id"

/>

名称"

name"

数量"

count"

actionscript

DataGrid自身好像并没有提供设置列的方法,不过我们可以通用新建DataGridColumn,然后添加到DataGrid的columns属性里（ps:

columns就是保存DataGrid列的属性.为DataGridColumn的数组）.

importmx.controls.*;

importmx.controls.dataGridClasses.*;

DataGrid1.width=275

crColumn（）;

//用脚本增加列

privatefunctioncrColumn（）:

varcol:

DataGridColumn

col=newDataGridColumn（）

col.headerText="

col.dataField="

DataGrid1.columns=DataGrid1.columns.concat（col）

这里要注意的时.虽然DataGrid.columns为保存列数据的数据,不过我们直接用操作DataGrid.columns将不会进行修改,而必须将修改后的DataGridColumn数组重新赋值给DataGrid,像上面看到的DataGrid1.columns=DataGrid1.columns.concat（col）.

随便说明一下.mxml跟actionscript中出现的headerText,即为表头的文字,而dataField是绑定数据中相关的字段.关于这个,我们将在下节进行说明.

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:

西瓜"

200},

3,name:

水蜜桃"

50}]

这里随便介绍一下[Bindable],他的作用是把数据设置为可绑定...

看一下完成代码.我们在（1-2）节的文件上继续~

DataGrid1.dataProvider=dataArr

dataProvider="

{dataArr}"

275"

editorDataField="

value"

Labelx="

440"

text="

mxml"

104"

actionscript"

绑定数据时必要注意的是.列中必须与数据中相应的字段（dataField）.

另外,如果我们在没有设置列的情况下绑定数据.DataGrid将会根据数据的属性和生相应的列.并以属性名为表头.

像上面的代码我们把

//crColumn（）;

屏蔽了

并把mxml中的<

节点

--mx:

/>

columns-->

进行上面的注释,执行后将看到下边的效果.（注意看表头）

XML格式的数据般为外部加载而来,通用用来显示从数据库等查询后的数据.

XML=<

data>

itemid="

1"

count="

100"

name>

苹果<

/name>

/item>

2"

200"

西瓜<

3"

50"

水蜜桃<

/data>

xml跟数据的操作差不多..也是直接设置dataProvider即可..不过这里我们要传进去的不是dataArr,应该是dataArr.item,并且把相关的dataField进行修改~（注意dataField的区别,属性在这里应该使用"

@属性名"

熟悉xml的朋友都了解,我就不多读说了）

DataGrid1.dataProvider=dataArr.item

@id"

@count"

{dataArr.item}"

width="

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]

完整代码:

450"

height="

400"

[CDATA[

importmx.events.ListEvent;

import