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。
<!-- 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。
相关文章推荐
- FLEX实践—Datagrid保存列模板及自动显示行号
- EasyUI的datagrid删除后一页所有数据不自动显示前页数据
- Flex4 DataGrid自动显示行号
- easyui datagrid删除最后一页所有数据无法自动显示前页数据
- Flex Datagrid 实战 [数据绑定、单击显示、分页]
- Flex DataGrid 数据的上下移动、增加、删除操作
- WPF DataGrid 绑定DataSet数据 自动生成行号
- WPF DataGrid使用 自动显示行号、全选、三级联动、拖拽
- 界面对应字段,绑定数据到gridview 显示 及删除功能 窗体事件 分页及键
- datagrid绑定list没有数据 表头不显示的问题
- datatable绑定comboBox,在下拉菜单中显示对应数据
- flex省市的comboBox下拉级联的数据即时绑定
- 在Flex中让Tree绑定数据后自动展开树节点
- Flex中在Tree绑定数据后自动展开树节点的方法
- FLEX COMBOBOX前端绑定数据
- Web中DataGrid绑定数据显示列可拖动
- Flex(mx:DataGrid)实现数据过滤显示
- windows mobile中使用datagrid绑定并显示数据及得到界面显示的数据值
- 市内移出版本2.0(1、一页显示15条。2、增加控制标志。3、打印表格时绑定的list的优化。4、保存迁出登记信息时根据业务流水号判断增加还是修改。5、统一管理常量)
- DataGrid中显示数据英文自动换行