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
<?xml version=""1.0""?>
<mx:Application xmlns:mx=""http://www.adobe.com/2006/mxml""
layout=""absolute"" width=""600"">
<mx:DataGrid y=""10"" width=""250"" right=""10"">
</mx:DataGrid>
</mx:Application>
actionscript
<?xml version=""1.0""?>
<mx:Application initialize=""init()"" xmlns:mx=""http://www.adobe.com/2006/mxml""
layout=""absolute"" width=""600"">
<mx:Script>
<![CDATA[
private var DataGrid1:DataGrid;
private function init():void{
DataGrid1 = new DataGrid()
DataGrid1.x = 10
DataGrid1.y = 30
DataGrid1.width = 250
addChild(DataGrid1)
}
]]>
</mx:Script>
</mx:Application>
上面分别就是由两种方式建立的DataGrid,左边是actionscript右边是mxml,是不是觉得看起来怪怪的.当然~因为空空的~并不是我们常见到的样子..那么我们下面继续设置表头(列).
设置表头
所谓的表头,其实就是DataGrid的列.我们也从mxml跟actionscript两头进行:
mxml
<?xml version=""1.0""?>
<mx:Application xmlns:mx=""http://www.adobe.com/2006/mxml""
layout=""absolute"" width=""600"" fontFamily=""宋体"" fontSize=""12"">
<mx:DataGrid id=""DataGrid2"" editable=""true"" width=""300"" y=""30"" right=""10"">
<mx:columns>
<mx:DataGridColumn headerText=""序号"" dataField=""id""/>
<mx:DataGridColumn headerText=""名称"" dataField=""name""/>
<mx:DataGridColumn headerText=""数量"" dataField=""count""/>
</mx:columns>
</mx:DataGrid>
</mx:Application>
actionscript
DataGrid自身好像并没有提供设置列的方法,不过我们可以通用新建DataGridColumn,然后添加到DataGrid的columns属性里(ps:columns就是保存DataGrid列的属性.为DataGridColumn的数组).
<?xml version=""1.0""?>
<mx:Application initialize=""init()"" xmlns:mx=""http://www.adobe.com/2006/mxml""
layout=""absolute"" width=""600"" fontFamily=""宋体"" fontSize=""12"">
<mx:Script>
<![CDATA[
import mx.controls.*;
import mx.controls.dataGridClasses.*;
private var DataGrid1:DataGrid;
private function init():void{
DataGrid1 = new DataGrid()
DataGrid1.x = 10
DataGrid1.y = 30
DataGrid1.width = 275
addChild(DataGrid1)
crColumn();//用脚本增加列
}
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)
}
]]>
</mx:Script>
</mx: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]
public var dataArr:Array = [{id:1,name:""苹果"",count:100},
{id:2,name:""西瓜"",count:200},
{id:3,name:""水蜜桃"",count:50}]
这里随便介绍一下[Bindable],他的作用是把数据设置为可绑定...
看一下完成代码.我们在(1-2)节的文件上继续~
<?xml version=""1.0""?>
<mx:Application initialize=""init()"" xmlns:mx=""http://www.adobe.com/2006/mxml""
layout=""absolute"" width=""600"" fontFamily=""宋体"" fontSize=""12"">
<mx:Script>
<![CDATA[
import mx.controls.*;
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 init():void{
DataGrid1 = new DataGrid()
DataGrid1.x = 10
DataGrid1.y = 30
DataGrid1.width = 275
addChild(DataGrid1)
crColumn();//用脚本增加列
DataGrid1.dataProvider = dataArr
}
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)
}
]]>
</mx:Script>
<mx:DataGrid id=""DataGrid2"" dataProvider=""{dataArr}"" width=""275"" y=""30"" right=""10"">
<mx:columns>
<mx:DataGridColumn headerText=""序号"" dataField=""id""/>
<mx:DataGridColumn headerText=""名称"" dataField=""name""/>
<mx:DataGridColumn headerText=""数量"" dataField=""count"" editorDataField=""value""/>
</mx:columns>
</mx:DataGrid>
<mx:Label x=""440"" y=""10"" text=""mxml""/>
<mx:Label x=""104"" y=""10"" text=""actionscript""/>
</mx:Application>
绑定数据时必要注意的是.列中必须与数据中相应的字段(dataField).
另外,如果我们在没有设置列的情况下绑定数据.DataGrid将会根据数据的属性和生相应的列.并以属性名为表头.
像上面的代码我们把
//crColumn();//用脚本增加列
屏蔽了
并把mxml中的<mx:columns>节点
<!--mx:columns>
<mx:DataGridColumn headerText=""序号"" dataField=""id"" />
<mx:DataGridColumn headerText=""名称"" dataField=""name""/>
<mx:DataGridColumn headerText=""数量"" dataField=""count""/>
</mx:columns-->
进行上面的注释,执行后将看到下边的效果.(注意看表头)
XML格式的数据般为外部加载而来,通用用来显示从数据库等查询后的数据.
[Bindable]
public var dataArr:XML = <data>
<item id=""1"" count=""100"">
<name>苹果</name>
</item>
<item id=""2"" count=""200"">
<name>西瓜</name>
</item>
<item id=""3"" count=""50"">
<name>水蜜桃</name>
</item>
</data>
xml跟数据的操作差不多..也是直接设置dataProvider即可..不过这里我们要传进去的不是dataArr,应该是dataArr.item,并且把相关的dataField进行修改~(注意dataField的区别,属性在这里应该使用""@属性名"",熟悉xml的朋友都了解,我就不多读说了)
<?xml version=""1.0""?>
<mx:Application initialize=""init()"" xmlns:mx=""http://www.adobe.com/2006/mxml""
layout=""absolute"" width=""600"" fontFamily=""宋体"" fontSize=""12"">
<mx:Script>
<![CDATA[
import mx.controls.*;
import mx.controls.dataGridClasses.*;
private var DataGrid1:DataGrid;
[Bindable]
public var dataArr:XML = <data>
<item id=""1"" count=""100"">
<name>苹果</name>
</item>
<item id=""2"" count=""200"">
<name>西瓜</name>
</item>
<item id=""3"" count=""50"">
<name>水蜜桃</name>
</item>
</data>
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)
}
]]>
</mx:Script>
<mx:DataGrid id=""DataGrid2"" dataProvider=""{dataArr.item}""
width=""275"" y=""30"" right=""10"">
<mx:columns>
<mx:DataGridColumn headerText=""序号"" dataField=""@id""/>
<mx:DataGridColumn headerText=""名称"" dataField=""name""/>
<mx:DataGridColumn headerText=""数量"" dataField=""@count"" editorDataField=""value""/>
</mx:columns>
</mx:DataGrid>
<mx:Label x=""440"" y=""10"" text=""mxml""/>
<mx:Label x=""104"" y=""10"" text=""actionscript""/>
</mx:Application>
Flex教程/组件详解之一:DataGrid(4)
今天我们继续讲DataGrid,介绍一下DataGrid中数据的增加/删除/获取。
添加/删除