有关Flex的DataGrid文章的确不少,都是零零碎碎的,目前还没有发现有个完整的例子供网友参考,这次我花了两天时间做了下Flex关于DataGrid一个指标数据管理系统,当然设计到的mxml会很多,大都是与DataGrid相关,我就抽取最常用的DataGrid的增删改同步数据库及页面数据来讲解
首先整理下思路,首先无论是删除还是修改,必须得获取当前行所在的记录,那么可以设置个全局变量,当DataGrid的itemClick事件出发时将选中的行赋给全局变量
[Bindable]public var acItemsSelected:Object;;
//事件方法
protected function myGrid_itemClickHandler(event:ListEvent):void
{
acItemsSelected = myGrid.selectedItem;
}
这样的话就可以获得了当前选中的对象了
如果删除和修改的话,通常传到后台的肯定含有对象的ID项,那么这个ID是怎么获取的呢,通过acItemsSelected.xxxId能获取,那么这个xxxId必须是在DataGrid中有,设置为不显示就好了,例如我就是这么做的
<mx:DataGridColumn visible="false" dataField="targetCalId" />
这样的话,要更改的数据等都能通过ID传到后台查询相应对象更改删除了,接下来的事是比较重要的,如果光删除数据库是不行的,页面数据也要保持同步,关于dataGrid也没有好的刷新方法,所以你上网一搜,可能有的人会告诉你对于删除这样做:dataArray.removeItemAt(myGrid.selectedIndex);
增加这样做:dataArray.addItemAt(obj,0);
修改这样做:dataArray.setItemAt(obj,myGrid.selectedIndex);
这里说的dataArray是指的是DataGrid的DataProvider的值集合【当然肯定得声明称全局变量】
这样的写法呢可能你觉得,哎,是对的,其实不然,这并没有真正起到作用,对于FLEX来说缓存是相当大的,不行的话你通过这个修改行记录的属性后,再点这行记录的属性编辑页面发现值根本没改,所以所没有进行二次查询数据库了,利用的是缓存。即便是你调用了初始化查询数据库的那个方法,也是不行的,还是有缓存,最好的做法就是,抛弃上面的三种写法,只需要两步就可以实现刷新,第一初始化DataGrid的那个方法请求必须是URLRequest的,添加一个参数类似于
var u:URLVariables=new URLVariables("temp="+Math.random());
当然不一定非要是temp什么名字都行,然后在返回操作成功提示后调用这个初始化方法,你会发现真的起作用了。
其实建议关于URLRequest传参数的最好带上这个参数,也不费事,可以在很多场合下解决缓存不更新问题
说了这么多其实就是先做好个思想准备,理清思路,下面我就贴上我的一段代码
mxml文件
- <SPAN style="FONT-SIZE: medium"><?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="668" height="326"
- creationComplete="initComponent()"
- title="指标计量单位"
- fontSize="15"
- close="closeWindow()">
- <s:layout>
- <s:VerticalLayout />
- </s:layout>
- <fx:Declarations>
- <mx:StringValidator id="sval_1" source="{targetTypeName}" property="text"
- tooShortError="字符串太短了,请输入最少4个字符. "
- tooLongError="字符串太长了,请输入最长20个字符. "
- minLength="4" maxLength="20"
- trigger="{myButton}" triggerEvent="click"
- />
- <mx:StringValidator id="sval_2" source="{targetCal}" property="text"
- tooShortError="字符串太短了,请输入最少4个字符. "
- tooLongError="字符串太长了,请输入最长20个字符. "
- minLength="4" maxLength="20"
- trigger="{myButton}" triggerEvent="click"
- />
- </fx:Declarations>
- <fx:Script>
- <![CDATA[
- import com.adobe.serialization.json.JSON;
- import mx.collections.ArrayCollection;
- import mx.controls.Alert;
- import mx.events.CloseEvent;
- import mx.events.ListEvent;
- import mx.managers.PopUpManager;
- import mx.rpc.events.ResultEvent;
- import mx.utils.URLUtil;
- import mx.validators.Validator;
- import org.osmf.utils.URL;
- [Bindable]public static var mainApp:DataCenterTargetPreserve = null;
- [Bindable]public var gsMyString:String;
- [Bindable]public var gnMyNumber:Number;
- [Bindable]public var acItemsSelected:Object;
- [Bindable]
- public var dataArray:ArrayCollection;
- private function initComponent():void
- {
- var u:URLVariables=new URLVariables("temp="+Math.random());
- var r:URLRequest=new URLRequest();
- r.data=u;
- r.method=URLRequestMethod.POST;
- r.url=mainApp.urls+"/findTargetCal.do";
- var l:URLLoader=new URLLoader();
- l.load(r);
- l.addEventListener(Event.COMPLETE, comp2);
- }
- function comp2(e:Event):void
- {
- var l:URLLoader=URLLoader(e.target);
- var array:Array=JSON.decode(String(l.data)) as Array;
- dataArray=new ArrayCollection(array);
- myGrid.dataProvider=dataArray;
- }
- private function closeWindow():void
- {
- PopUpManager.removePopUp(this);
- }//closeWindow
- private function showFinalSelection(oEvent:Event):void
- {
- //mainApp.tiFinalSelection.text = oEvent.target.selectedItem.album;
- }//showFinalSelection
- protected function button1_clickHandler(event:MouseEvent):void
- {
- PopUpManager.removePopUp(this);
- }
- protected function button2_clickHandler(event:MouseEvent):void
- {
- var all:Array=Validator.validateAll([sval_1,sval_2]);
- if(all.length==0){
- var v:URLVariables=new URLVariables("targetTypeName="+targetTypeName.text+"&targetCal="+targetCal.text+"&temp="+Math.random());
- var r:URLRequest=new URLRequest();
- r.url=mainApp.urls+"/addTargetCal.do";
- r.method=URLRequestMethod.POST;
- r.data=v;
- var l:URLLoader=new URLLoader();
- l.load(r);
- l.addEventListener(Event.COMPLETE,comp);
- }else{
- Alert.show("新增失败");
- }
- }
- private function comp(e:Event):void{
- var l:URLLoader = URLLoader(e.target);
- var o:Object=URLUtil.stringToObject(l.data,";",true);
- if(o.result=="add"){
- Alert.show("新增成功");
- var obj:Object=(JSON.decode(o.datas) as Object);
- //dataArray.addItemAt(obj,0);
- Alert.show(obj.targetCalId);
- }
- initComponent();
- }
- private function myClick(evt:CloseEvent):void{
- //Alert.show("本次要删除的为"+mainDataGrid.selectedIndex);
- if(evt.detail==Alert.YES){
- //Alert.show(acItemsSelected.getItemAt(0).targetId);
- var v:URLVariables = new URLVariables("id="+acItemsSelected.targetCalId+"&temp="+Math.random());
- var r:URLRequest = new URLRequest();
- r.url =mainApp.urls+"/deleteTargetCal.do" ;
- r.method = URLRequestMethod.POST;
- r.data=v;
- var l:URLLoader = new URLLoader();
- l.load(r);
- //dataArray.removeItemAt(myGrid.selectedIndex);
- l.addEventListener(Event.COMPLETE,comp1); //注册请求完成后 响应获取数据事件方法
- }
- }
- private function comp1(e:Event):void
- {
- var l:URLLoader = URLLoader(e.target);
- var o:Object = URLUtil.stringToObject(l.data, ";", true);
- if(o.result=="delete"){
- Alert.show("删除成功!","友情提示");
- }
- initComponent();
- }
- protected function button3_clickHandler(event:MouseEvent):void
- {
- if(myGrid.selectedItem==null){
- Alert.show("请选择一项进行删除","友情提示");
- }else{
- var dlg_obj:Object=Alert.show("确认删除吗?", "友情提示!", Alert.YES|Alert.NO,null,myClick);
- }
- }
- protected function button4_clickHandler(event:MouseEvent):void
- {
- if(myGrid.selectedItem==null){
- Alert.show("请选择一项进行修订!","友情提示");
- }else{
- var v:URLVariables = new URLVariables("targetTypeName="+targetTypeName.text+"&targetCal="+targetCal.text+"&id="+acItemsSelected.targetCalId);
- var r:URLRequest = new URLRequest();
- r.url =mainApp.urls+"/updateTargetCal.do";
- r.method = URLRequestMethod.POST;
- r.data = v;
- var l:URLLoader = new URLLoader();
- l.load(r);
- l.addEventListener(Event.COMPLETE,comp3); //注册请求完成后 响应获取数据事件方法
- }
- }
- private function comp3(e:Event):void
- {
- var l:URLLoader = URLLoader(e.target);
- var o:Object = URLUtil.stringToObject(l.data, ";", true);
- if(o.result=="update"){
- Alert.show("更新成功!","友情提示");
- var obj:Object=(JSON.decode(o.datas) as Object);
- //dataArray.setItemAt(obj,myGrid.selectedIndex);
- }else{
- Alert.show("操作失败!","友情提示");
- }
- initComponent();
- }
- protected function myGrid_itemClickHandler(event:ListEvent):void
- {
- acItemsSelected =myGrid.selectedItem;
- }
- ]]>
- </fx:Script>
- <mx:Form width="651" height="282">
- <mx:DataGrid width="616" height="160" id="myGrid" itemClick="myGrid_itemClickHandler(event)">
- <mx:columns>
- <mx:DataGridColumn headerText="计量名称" dataField="targetTypeName"/>
- <mx:DataGridColumn headerText="计量符号" dataField="targetCal"/>
- <mx:DataGridColumn visible="false" dataField="targetCalId" />
- </mx:columns>
- </mx:DataGrid>
- <mx:HBox>
- <s:Label width="33"/>
- <mx:FormItem label="计量名称" >
- <s:TextInput id="targetTypeName"/>
- </mx:FormItem>
- <mx:FormItem label="计量符号" >
- <s:TextInput id="targetCal"/>
- </mx:FormItem>
- <mx:FormItem >
- <s:Button label="新增" id="myButton" click="button2_clickHandler(event)" />
- </mx:FormItem>
- </mx:HBox>
- <mx:FormItem >
- </mx:FormItem>
- <mx:HBox>
- <s:Label width="250"/>
- <mx:FormItem >
- <s:Button label="删除" click="button3_clickHandler(event)"/>
- </mx:FormItem>
- <mx:FormItem >
- <s:Button label="修改" click="button4_clickHandler(event)"/>
- </mx:FormItem>
- <mx:FormItem >
- <s:Button label="刷新"/>
- </mx:FormItem>
- <mx:FormItem >
- <s:Button label="关闭" click="button1_clickHandler(event)"/>
- </mx:FormItem>
- </mx:HBox>
- </mx:Form>
- </s:TitleWindow>
- </SPAN>