Flex教程DataGrid.docx

1、Flex教程DataGridFlex教程/组件详解之一：DataGrid(1-2)今天来介绍一个DataGrid的使用,DataGrid是基于列表的控件,以表格的形式输出数据,可以当他是一个多列的list.我们将从建立、数据填充、取值、删除、拖拽(?不晓得有没有打错)等几个方面来详细介绍DataGrid的用法,另外,每个由于当前网上普遍的教程都重在mxml描述进来介绍,忽略了由actionscript操作的相关介绍,所以教程从mxml跟as对比进行介绍:1.建立DataGrid2.设置表头3.数据绑定4.数据增加/删除/获取5.DataGrid编辑数据(1)6.DataGrid编辑数据(2)：

2、itemEditor/itemRenderer建立DataGrid我们先来介绍一下建立DataGrid,分别从mxml跟actionscriptmxml actionscript 上面分别就是由两种方式建立的DataGrid,左边是actionscript右边是mxml,是不是觉得看起来怪怪的.当然因为空空的并不是我们常见到的样子.那么我们下面继续设置表头(列).设置表头所谓的表头,其实就是DataGrid的列.我们也从mxml跟actionscript两头进行：mxml actionscriptDataGrid自身好像并没有提供设置列的方法,不过我们可以通用新建DataGridColumn,

3、然后添加到DataGrid的columns属性里(ps:columns就是保存DataGrid列的属性.为DataGridColumn的数组).这里要注意的时.虽然DataGrid.columns为保存列数据的数据,不过我们直接用操作DataGrid.columns将不会进行修改,而必须将修改后的DataGridColumn数组重新赋值给DataGrid,像上面看到的DataGrid1.columns = DataGrid1.columns.concat(col).随便说明一下.mxml跟actionscript中出现的headerText,即为表头的文字,而dataField是绑定数据中相关

4、的字段.关于这个,我们将在下节进行说明.Flex教程/组件详解之一：DataGrid(3)上节我们介绍了DataGrid的建立与设置表头,今天我们介绍一下DataGrid中重要的功能数据绑定(dataProvider).DataGrid.的数据源技术多种数据格式.XML,Array,Model,我们分别说一下Array跟XML(Model跟XML类似).数组(Array)形式的数据源.常用在数据源为写程序的时候已经设定好.非外部加载时比较多(外部加载一般为xml) Bindablepublic var dataArr:Array = id:1,name:苹果,count:100,id:2,na

5、me:西瓜,count:200,id:3,name:水蜜桃,count:50这里随便介绍一下Bindable,他的作用是把数据设置为可绑定.看一下完成代码.我们在(1-2)节的文件上继续绑定数据时必要注意的是.列中必须与数据中相应的字段(dataField).另外,如果我们在没有设置列的情况下绑定数据.DataGrid将会根据数据的属性和生相应的列.并以属性名为表头.像上面的代码我们把/crColumn();/用脚本增加列屏蔽了并把mxml中的节点进行上面的注释,执行后将看到下边的效果.(注意看表头)XML格式的数据般为外部加载而来,通用用来显示从数据库等查询后的数据.Bindablepubl

6、ic var dataArr:XML = 苹果西瓜水蜜桃xml跟数据的操作差不多.也是直接设置dataProvider即可.不过这里我们要传进去的不是dataArr,应该是dataArr.item,并且把相关的dataField进行修改(注意dataField的区别,属性在这里应该使用属性名,熟悉xml的朋友都了解,我就不多读说了) !CDATAimport mx.controls.*;import mx.controls.dataGridClasses.*;private var DataGrid1:DataGrid;Bindablepublic var dataArr:XML = 苹果西瓜

7、水蜜桃private function init():voidDataGrid1 = new DataGrid()DataGrid1.x = 10DataGrid1.y = 30DataGrid1.width = 275addChild(DataGrid1)crColumn();/用脚本增加列DataGrid1.dataProvider = dataArr.itemprivate function crColumn():voidvar col:DataGridColumncol = new DataGridColumn()col.headerText = 序号col.dataField = i

8、dDataGrid1.columns = DataGrid1.columns.concat(col)col = new DataGridColumn()col.headerText = 名称col.dataField = nameDataGrid1.columns = DataGrid1.columns.concat(col)col = new DataGridColumn()col.headerText = 数量col.dataField = countDataGrid1.columns = DataGrid1.columns.concat(col)Flex教程/组件详解之一：DataGri

9、d(4)今天我们继续讲DataGrid,介绍一下DataGrid中数据的增加/删除/获取。添加/删除由于DataGrid的数据都绑定于Array或XML,所以我们需要增加记当或删除记录的时候.只需要对所绑定的数据进行相应的操作即可。这里就不多说了.一会直接看代码。要提示一下的是.虽然数据与DataGrid进行的绑定.不过好像修改了数据源不会立刻更新.需要DataGrid对数据源进行一次反向操作(就在是DataGrid下进行编辑,下一节会介绍),才会进行更新,所以如果希望立刻更新的话.我们可以再指行一次数据指定.DataGrid.dataProvider = 数据源获取这里所说的获取.是当我们对

10、DataGrid进行的操作(点击项目)的时候.进行所点击的位置索引与数据的获取.(如果要获取指定第几行，每几列的数据，这样对数据源进行操作即可)当我们侦听itemClick事件的时候.将会接收到一个ListEvent事件对象.对象里分别有所点击单元格的列索引与列索引,我们就从这两个数据进行其它数据的获取.(ps:下边提到的e为ListEvent事件对象.)1.所点击的列的表头(e.target as DataGrid).columnse.columnIndex.headerText2.点击的列索引e.columnIndex3.点击的行索引e.rowIndex4.点击的整行的数据(选中的数据)(e.target as DataGrid).selectedItem5.选中的单元格的数据(e.target as DataGrid).selectedItem(e.target as DataGrid).columnse.columnIndex.dataField完整代码: !CDATA import mx.controls.*; import mx.events.ListEvent;import mx.controls.dataGridClasses.*; pr