您的位置:首页 > 其它

Flex中DataGrid绑定ComboBox ,自动显示行号,增加行,删除行,保存数据

2010-09-17 14:11 746 查看
<?xml version="1.0" encoding="utf-8"?>
<!-- Simple custom MXML TitleWindow component.
The TitleWindowApp application displays this component.
You cannot run it independently. -->

<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
title="个人信息" width="682" height="438"
showCloseButton="true" close="closeHandler();"
borderColor="#00BEFF" cornerRadius="0"
layout="absolute" x="200" y="100" fontSize="14"
xmlns:components="*" creationComplete="init()" >
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.collections.XMLListCollection;
import mx.managers.PopUpManager;
import mx.controls.Alert;
public var comBoxXML: XML =
<list>
<way>手机</way>
<way>邮箱</way>
</list>;
[Bindable]
public var comBox:XMLListCollection=new XMLListCollection(comBoxXML.way);
[Bindable]
private var dataArr:ArrayCollection=new ArrayCollection();
var item1:Object={way:"手机",add:"1396907****"};
var item2:Object={way:"邮箱",add:"************"};
private function init():void
{
dataArr.addItem(item1);
dataArr.addItem(item2);
}
/**
* 关闭窗口
*/
public function closeHandler():void
{
// isOpObj=false;
PopUpManager.removePopUp(this);
}

import mx.collections.ArrayCollection;
public var index:Number;
//自动显示行号中得到行号
private function getLineNum(item:Object,num:int):String{
index = dataArr.getItemIndex(item)+1;
return String(index);
}
//增加一条记录
private function addRecord():void
{
//Alert.show("add");
var item3:Object={};
dataArr.addItem(item3);
dg.dataProvider=dataArr;

}
//删除一条记录
private function deleteRecord():void
{
//Alert.show("reduce");
var item4:Object=dg.selectedItem;
var index:int=dataArr.getItemIndex(item4);
dataArr.removeItemAt(index);
dg.dataProvider=dataArr;
}
//保存信息
private function saveInfo():void
{
//当dataGrid输入有改变的时候,会自动反写到dataProvider中
var index:int=dataArr.length;
//dataArr.removeAll();
Alert.show(index.toString());
for(var i=0;i<index;i++){
//var obj:Object=dg.getChildAt(i);
Alert.show(dataArr.getItemAt(i).way);

}

}
]]>
</mx:Script>

<mx:Label x="20" y="35" text="个人信息:" fontSize="12"/>
<mx:Label x="20" y="88" text="账号:" fontSize="12"/>
<mx:Label x="281" y="88" text="姓名:" fontSize="12"/>
<mx:HBox x="20" y="10" width="632">
<mx:Spacer width="100%" height="100%"/>
<mx:Button label="保存" click="saveInfo();" fontSize="12" />
<mx:Button label="取消" click="closeHandler();" fontSize="12"/>
</mx:HBox>
<mx:Label x="20" y="129" text="性别:" fontSize="12"/>
<mx:RadioButton x="83" y="127" label="男" fontSize="12"/>
<mx:RadioButton x="139" y="127" label="女" fontSize="12"/>
<mx:RadioButton x="194" y="127" label="未知" fontSize="12"/>
<mx:Label x="281" y="129" text="生日:" fontSize="12"/>
<mx:ComboBox x="348" y="124" width="60"></mx:ComboBox>
<mx:ComboBox x="446" y="124" width="53"></mx:ComboBox>
<mx:ComboBox x="537" y="124" width="57"></mx:ComboBox>
<mx:Label x="416" y="129" text="年" fontSize="12"/>
<mx:Label x="507" y="129" text="月" fontSize="12"/>
<mx:Label x="602" y="129" text="日" fontSize="12"/>
<mx:TextInput x="83" y="84" editable="false"/>
<mx:TextInput x="348" y="84"/>
<mx:DataGrid id="dg" x="20" y="157" width="632" height="191" editable="true" dataProvider="{dataArr}" >
<mx:columns>
<mx:DataGridColumn headerText="序号" dataField="num" labelFunction="getLineNum" editable="false" />
<mx:DataGridColumn headerText="联系方式" dataField="way" editorDataField="value" >
<mx:itemEditor>
<mx:Component>
<mx:HBox>
<mx:Script>
<![CDATA[
public function get value():Object
{
if(cmb.selectedItem == null)
return null;
var item1 :XML = cmb.selectedItem as XML;
var method1 : String = item1.children()[0]; //联系方式
data.way = method1; // data DataGrid上面的当前行的数据
return method1;
}
override public function set data(value:Object):void
{
//必须要给data复制,否则会导致程序崩溃
super.data=value;
//给combobox赋初始值
for each(var item1 :XML in cmb.dataProvider)
{
trace(item1.children()[0]);
var method2 : String = item1.children()[0];
if(method2 == value.way){ //value DataGrid上面的当前行的数据
cmb.selectedItem=item1;
}
}
}
//下面的 {outerDocument}标识引用外部的数据 在这里写注释比较方便:)
]]>
</mx:Script>
<mx:ComboBox id="cmb" labelField="方式" width="100%" dataProvider="{outerDocument.comBox}" />
</mx:HBox>
</mx:Component>
</mx:itemEditor>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="联系地址" dataField="add"/>
</mx:columns>
</mx:DataGrid>
<mx:HBox x="20" y="356" width="632">
<mx:Spacer width="100%" height="100%"/>
<mx:Button label="增加" click="addRecord();" width="54" fontSize="12"/>
<mx:Button label="删除" click="deleteRecord();" fontSize="12"/>
</mx:HBox>
</mx:TitleWindow>

注意:这个文件是TitleWindow,把它作为一个弹出窗口运行,或者改成Application。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: