FLEX4，在弹出界面修改或增加主界面的数据，并可实现分批出修改或增加

来源：互联网发布：计量型数据编辑：程序博客网时间：2024/06/07 11:54

最近在项目开发中，设计了一种应用场景：即两个界面，一个父界面，一个是弹出的子界面窗口，需要实现将父界面中选中的数据传输到子界面窗口中进行显示确认，并可以在子界面中实现对父界面中显示数据的修改或添加。

在网上查阅了很多资料，从各种查阅到的知识点中加以整合修改及完善，最终完成了应用场景的设计。废话不多说，上代码：

1.主界面：testFaSoDAta.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" >
<fx:Declarations>

</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.events.CloseEvent;
import mx.managers.PopUpManager;
[Bindable]
private var childWindow:ChildWindow=new ChildWindow(); //子窗口定义
private var grid:ArrayCollection =new ArrayCollection( //主界面显示数据
[{number:"2014010101",name:"张三",sex:"男",age:"23"},
{number:"2014010102",name:"李四",sex:"女",age:"23"},
{number:"2014010103",name:"李四",sex:"男",age:"23"},
{number:"2014010104",name:"张三",sex:"男",age:"23"},
{number:"2014010105",name:"张三",sex:"男",age:"23"},
{number:"2014010106",name:"张三",sex:"男",age:"23"},
{number:"2014010107",name:"张三",sex:"男",age:"23"},
{number:"2014010108",name:"张三",sex:"男",age:"23"}
])
private var dataChoosed:ArrayCollection=new ArrayCollection(); //主界面中选中的数据，用于传递给子界面
var dataArray:Array=new Array(); //选中数据数组
protected function updateHandler(event:MouseEvent):void //增加爱好信息按钮调用函数
{
if(!datagrid.selectedItem)
{
Alert.show("请选择");
return;
}
else
{
childWindow.addEventListener(CloseEvent.CLOSE,save);
PopUpManager.addPopUp(childWindow,this,true);
for(var i=0; i<datagrid.selectedItems.length;i++)
{
var count:int=new int();
var obj:Object=new Object();
obj.number=datagrid.selectedItems[i].number;
obj.name=datagrid.selectedItems[i].name;
obj.sex=datagrid.selectedItems[i].sex;
obj.age=datagrid.selectedItems[i].age;
dataArray.push(obj);
dataChoosed=new ArrayCollection(dataArray); //将选中的数据存到dataChoosed中，用于子界面的显示
count=i+1;
}
childWindow.callBack = this.save; //子界面回调函数
childWindow.gridTest=dataChoosed; //设定子界面显示数据的内容
childWindow.gridMain=grid; //将主界面的数据源传输一份全量数据到子界面，用于子界面修改用；
childWindow.datagrid.rowCount=count; //设定子页面窗口中表格的行数；
PopUpManager.centerPopUp(childWindow);
}
//childWindow.gridTest.removeAll();
}
public function save():void //子界面回调函数，用于修改主界面的显示数据源，刷新显示数据
{
datagrid.dataProvider=childWindow.gridMain;
}
]]>
</fx:Script>
<mx:VBox width="100%" height="100%" paddingBottom="10" paddingLeft="60" paddingRight="60" paddingTop="40">
<mx:DataGrid id="datagrid" dataProvider="{grid}" rowCount="{grid.length+1}" width="100%" verticalAlign="middle" textAlign="center" allowDragSelection="true" allowMultipleSelection="true">
<mx:columns>
<mx:DataGridColumn headerText="学号" dataField="number"/>
<mx:DataGridColumn headerText="姓名" dataField="name"/>
<mx:DataGridColumn headerText="性别" dataField="sex"/>
<mx:DataGridColumn headerText="年龄" dataField="age"/>
<mx:DataGridColumn headerText="爱好" dataField="hobby"/>
</mx:columns>
</mx:DataGrid>
<mx:HBox width="100%" horizontalAlign="center" height="35" verticalAlign="middle" fontSize="12">
<s:Button id="popup" label="增加爱好信息" click="updateHandler(event)"/>
</mx:HBox>
</mx:VBox>
</s:Application>

2. 子界面：ChildWindow.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="600" height="400" close="closeHandler(event)" title="修改窗口" creationComplete="init()">
<s:layout>
<s:BasicLayout/>
</s:layout>
<fx:Declarations>

</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.events.CloseEvent;
import mx.managers.PopUpManager;
public var number:int=new int;
public var gridTest:ArrayCollection = new ArrayCollection(); //子界面显示数据
public var gridMain:ArrayCollection = new ArrayCollection(); //子界面中全量数据
public var callBack:Function; //子界面回调函数
//number=gridTest.length;
public function init():void //子界面弹出时初始化内容
{
//number=gridTest.length;
datagrid.dataProvider=gridTest;

}
protected function closeHandler(event:CloseEvent):void //关闭子界面调用方法
{
gridTest.removeAll();
datagrid.dataProvider=gridTest;//清除gridTest中上次存储的数据
PopUpManager.removePopUp(this);

}
protected function updateHandler(event:MouseEvent):void //将对应信息进行更新
{
var hobbySet:String=new String();
hobbySet=hobby.text;
for(var i=0;i<gridMain.length;i++)
{
for(var j=0;j<gridTest.length;j++)
{
if(gridMain.getItemAt(i).number==gridTest.getItemAt(j).number)
{
var obj:Object=new Object();
obj.number=gridTest.getItemAt(j).number; //由于setItemAt方法，是重新设置一条记录的所有字段，所以还要设定原先的信息，最终增加要增加的信息。在这个过程中可以修改这条记录的中对应字段
obj.name=gridTest.getItemAt(j).name;
obj.sex=gridTest.getItemAt(j).sex;
obj.age=gridTest.getItemAt(j).age;
obj.hobby=hobby.text;
gridMain.setItemAt(obj,i); //修改gridMain数据源中的数据
}
}
}
callBack.call(parent); //调用父窗口中
datagrid.dataProvider=gridTest;
gridTest.removeAll(); //清除gridTest中上次存储的数据
hobby.text=""; //清除掉原先输入的数据
PopUpManager.removePopUp(this);
}

]]>
</fx:Script>
<mx:VBox width="100%" height="100%">
<mx:DataGrid id="datagrid" width="100%" verticalAlign="middle" textAlign="center">
<mx:columns>
<mx:DataGridColumn headerText="学号" dataField="number"/>
<mx:DataGridColumn headerText="姓名" dataField="name"/>
<mx:DataGridColumn headerText="性别" dataField="sex"/>
<mx:DataGridColumn headerText="年龄" dataField="age"/>
</mx:columns>
</mx:DataGrid>
<s:TextInput id="hobby" paddingLeft="25"/>
<mx:HBox width="100%" horizontalAlign="center" verticalAlign="middle">
<s:Button id="popup" label="更新" click="updateHandler(event)"/>
</mx:HBox>
</mx:VBox>
</s:TitleWindow>

1. 功能展示，主界面：

2. 选中一条数据，进行插入，子界面：

3. 在子界面输入要更新的数据

4. 设置完成主界面显示：

5. 第二次设定，多条选中设置：

6. 最终显示结果：

该程序中还可以对现有的数据进行修改，需要做的是在设定是，将需要修改的值设置到指定的位置：如修改第一条数据的年龄为100，效果如下所示：

总结一下，这个例子主要是用于用子界面更新父界面的值，添加修改等。在父页面中选中要修改的数据，首先在子页面上显示；然后传输一份原始数据给子页面，子页面通过与要修改的数据进行比对，确定需要修改的数据，并将值修改进去。通过回调函数，子页面调用父界面的函数，更换数据源为修改后的总体数据，此时要清楚上次记录的选中的数据，为下次选择做准备。

这种方法也是自己琢磨出来的，环境提出修改意见！

0 0