和 DataGrid 相关的文章

对于DataGrid,我们最常用到的.基本上就是他的自定义列itemEditor和itemRenderer..对于一般的自定义组件..像checkbox等组件..已经内置了同步的方法"data",在帮助中这么介绍到

data 属性
data:Object []
　　当您将某个组件用作项目渲染器或项目编辑器时，可借助 data 属性向该组件传递值。您通常使用数据绑定将 data 属性的字段绑定到此组件的某个属性。
　　当您使用此控件作为嵌入式项目渲染器或嵌入式项目编辑器时，Flex 会自动将此项目的当前值写入此控件的 selected 属性。
　　此属性可用作数据绑定的源。

所以默认情况下..只要我们指定了系统已有组件的话..那他会就自动把相应的数据显示出来..(或者手动指定data,需要特别显示可以重写data)

那么..对于我们自定义的组件..
或者我们需要按指定的形式显示数据的话...
我们只需要也写一个相应的共开的属性...
就可以完全同步自定义itemRenderer或itemEditor...


上面的例子中..同步了性别字段..其中第二列显示使用LabelFunction，编辑使用了一个自定义C,第三列显示编辑都使用的是自定义C,
无论修改的是第二列或第三列..相应的显示都会完全同步..
另外..在dg外..再添加一个list..同步显示该字段..

主mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application fontSize="12" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">
	<mx:Script>
		<![CDATA[
			import mx.collections.*;
			import mx.controls.*;
			[Bindable]
			private var rs:ArrayCollection = new ArrayCollection([{name:"陈一",age:18,sex:0},{name:"刘二",age:18,sex:1},{name:"张三",age:18,sex:2},{name:"李四",age:18,sex:0},])
			private function getSex(data:Object,dgc:DataGridColumn=null):String
			{
				return data.sex==1?'男':(data.sex==2?'女':'非男非女');
			}
		]]>
	</mx:Script>
	<mx:DataGrid id="dg" dataProvider="{rs}" editable="true" right="10" left="10" top="10" bottom="120">
		<mx:columns>
			<mx:DataGridColumn headerText="姓名" dataField="name" width="50"/>
			<mx:DataGridColumn headerText="性别一" 
				labelFunction="{getSex}" dataField="sex" 
				editorDataField="selected" editorYOffset="2" width="130">
				<mx:itemEditor>
	<mx:Component>
						<local:G selected="{data}"/>
	</mx:Component>
	</mx:itemEditor>
			</mx:DataGridColumn>
			<mx:DataGridColumn headerText="性别二" dataField="sex" 
				editorDataField="selected" editorYOffset="2" width="130">
				<mx:itemRenderer>
	<mx:Component>
						<local:G selected="{data}"/>
	</mx:Component>
	</mx:itemRenderer>
				<mx:itemEditor>
	<mx:Component>
						<local:G selected="{data}"/>
	</mx:Component>
	</mx:itemEditor>
			</mx:DataGridColumn>
		</mx:columns>
	</mx:DataGrid>
	<mx:List dataProvider="{rs}" labelFunction="getSex" labelField="sex" left="10" right="10" bottom="10" height="102">
	</mx:List>
</mx:Application>

G.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Script>
		<![CDATA[
			[Bindable]
			public function get selected():Object
			{
				return radiogroup1.selectedValue=='男'?1:(radiogroup1.selectedValue=='女'?2:0)
			}
			public function set selected(value:Object):void
			{
				radiogroup1.selectedValue=value.sex==1?'男':(value.sex==2?'女':'非男非女')
			}
		]]>
	</mx:Script>
	<mx:RadioButtonGroup id="radiogroup1" />
	<mx:RadioButton label="非男非女" groupName="radiogroup1" data="0"/>
	<mx:RadioButton label="男" groupName="radiogroup1" data="1"/>
	<mx:RadioButton label="女" groupName="radiogroup1" data="2"/>
</mx:HBox>

今天我们继续讲DataGrid,介绍一下DataGrid中的itemEditor和itemRenderer.

从字面上的意思,我们可以理解itemEditor为DataGrid的单元格编辑器,而itemRenderer则为渲染器,就是说.itemEditor只会在单元格处理编辑状态下才会出现.而itemRenderer则是一直显示(就是网友关心的,自定义DataGrid的列)
查看文章剩余部份

先为512默哀一分钟!谢谢!

今天继续介绍一下DataGrid的编辑功能,
编辑状态操作非常简单,只需要设置editable="true",
但需要注意的事,要先设置DataGrid开启全局的编辑功能,
然后再针对DataGridColumn(列)把不需要编辑的列用editable="false"取消编辑功能。
查看文章剩余部份

今天我们继续讲DataGrid,介绍一下DataGrid中数据的增加/删除/获取。

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

上节我们介绍了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}]

查看文章剩余部份

今天来介绍一个DataGrid的使用,DataGrid是基于列表的控件,以表格的形式输出数据,可以当他是一个多列的list.
我们将从建立、数据填充、取值、删除、拖拽(?不晓得有没有打错)等几个方面来详细介绍DataGrid的用法,另外,每个由于当前网上普遍的教程都重在mxml描述进来介绍,忽略了由actionscript操作的相关介绍,所以教程从mxml跟as对比进行介绍:

1.建立DataGrid
2.设置表头
3.数据绑定
4.数据增加/删除/获取
5.DataGrid编辑数据(1)
6.DataGrid编辑数据(2)：itemEditor/itemRenderer
查看文章剩余部份