[指南]Flex教程DataGrid

[指南]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 actionscript 上面分别就是由两种方式建立的DataGrid,左边是actionscript右边是mxml,是不是觉得看起来怪怪的.当然~因为空空的~并不是我们常见到的样子..那么我们下面继续设置表头(列). 设置表头 所谓的表头,其实就是DataGrid的列.我们也从mxml跟actionscript两头进行: mxml actionscript DataGrid自身好像并没有提供设置列的方法,不过我们可以通用新建DataGridColumn,然后添加到DataGrid的columns属性里(ps:columns就是保存DataGrid列的属性.为DataGridColumn的数组). 这里要注意的时.虽然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] public var dataArr:Array = [{id:1,name:"苹果",count:100}, {id:2,name:"西瓜",count:200}, {id:3,name:"水蜜桃",count:50}] 这里随便介绍一下[Bindable],他的作用是把数据设置为可绑定... 看一下完成代码.我们在(1-2)节的文件上继续~ 绑定数据时必要注意的是.列中必须与数据中相应的字段(dataField). 另外,如果我们在没有设置列的情况下绑定数据.DataGrid将会根据数据的属性和生相应的列.并以属性名为表头. 像上面的代码我们把 //crColumn();//用脚本增加列 屏蔽了 并把mxml中的节点 进行上面的注释,执行后将看到下边的效果.(注意看表头) XML格式的数据般为外部加载而来,通用用来显示从数据库等查询后的数据. [Bindable] public var dataArr:XML = 苹果 西瓜 水蜜桃 xml跟数据的操作差不多..也是直接设置dataProvider即可..不过这里我们要传进去的不是dataArr,应该是dataArr.item,并且把相关的dataField进行修改~(注意dataField的区别,属性在这里应该使用"@属性名",熟悉xml的朋友都了解,我就不多读说了) 苹果 西瓜 水蜜桃 private function init():void{ DataGrid1 = new DataGrid() DataGrid1.x = 10 DataGrid1.y = 30 DataGrid1.width = 275 addChild(DataGrid1) crColumn();//用脚本增加列 DataGrid1.dataProvider = dataArr.item } private function crColumn():void{ var col:DataGridColumn col = new DataGridColumn() col.headerText = "序号" col.dataField = "@id" DataGrid1.columns = DataGrid1.columns.concat(col) col = new DataGridColumn() col.headerText = "名称" col.dataField = "name" DataGrid1.columns = DataGrid1.columns.concat(col) col = new DataGridColumn() col.headerText = "数量" col.dataField = "@count" DataGrid1.columns = DataGrid1.columns.concat(col) } ]]> Flex教程/组件详解之一:DataGrid(4) 今天我们继续讲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] 完整代码: Flex教程/组件详解之一:DataGrid(5) 今天继续介绍一下DataGrid的编辑功能, 编辑状态操作非常简单,只需要设置editable="true", 但需要注意的事,要先设置DataGrid开启全局的编辑功能, 然后再针对DataGridColumn(列)把不需要编辑的列用editable="false"取消编辑功能。 Flex教程/组件详解之一:DataGrid(6) 今天我们继续讲DataGrid,介绍一下DataGrid中的itemEditor和itemRenderer. 从字面上的意思,我们可以理解itemEditor为DataGrid的单元格编辑器,而itemRenderer则为渲染器,就是 说.itemEditor只会在单元格处理编辑状态下才会出现.而itemRenderer则是一直显示(就是网友关心的,自定义DataGrid的列) 我们继续之前应用到的代码. 首先我们看看在mxml中定义itemEditor/itemRenderer的方法.定义代码在columns中进行(表头),只要在相应的列中,设定/,然后选择你需要使用的组件,另外这里要注意的是..设置了itemEditor/itemRenderer的DataGridColumn,需要增加一个editorDataField,相应的填上你选择的组件的属性.如这里..我需要的是NumericStepper的value属性.所以填上editorDataField="value",这样.当NumericStepper修改时..相应的单元格的值就会变成NumericStepper的value属性的值. ..大概跟上面类似.,需要注意的是.用代码设置itemRenderer时.接受的类形是ClassFactory.,如果而as的写法 需要给选择的组件(这里是NumericStepper),需要设置ClassFactory的properties属性.为一个object,我们看看代码 col = new DataGridColumn() col.headerText = "价格" col.dataField = "price" col.editable = false var itemRenderer:ClassFactory = new ClassFactory(NumericStepper); itemRenderer.properties = {maximum:1000,minimum:10} col.itemRenderer = itemRenderer col.editorDataField = "value" itemEditor类似这里不说明了 看看完整的代码