现在的位置: 首页 > 综合 > 正文

Flex4之DataGrid增删改同步数据库及页面数据示例总结

2018年07月28日 ⁄ 综合 ⁄ 共 23573字 ⁄ 字号 评论关闭

有关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文件

Xml代码 复制代码
  1. <SPAN style="FONT-SIZE: medium"><?xml version="1.0" encoding="utf-8"?>  
  2. <s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"    
  3.                xmlns:s="library://ns.adobe.com/flex/spark"    
  4.                xmlns:mx="library://ns.adobe.com/flex/mx" width="668" height="326"    
  5.                creationComplete="initComponent()"      
  6.                title="指标计量单位"  
  7.                fontSize="15"  
  8.                close="closeWindow()">     
  9.        
  10.     <s:layout>  
  11.         <s:VerticalLayout />  
  12.     </s:layout>  
  13.     <fx:Declarations>  
  14.         <mx:StringValidator id="sval_1" source="{targetTypeName}" property="text"    
  15.                             tooShortError="字符串太短了,请输入最少4个字符. "    
  16.                             tooLongError="字符串太长了,请输入最长20个字符. "    
  17.                             minLength="4" maxLength="20"    
  18.                             trigger="{myButton}" triggerEvent="click"    
  19.                             />  
  20.         <mx:StringValidator id="sval_2" source="{targetCal}" property="text"    
  21.                             tooShortError="字符串太短了,请输入最少4个字符. "    
  22.                             tooLongError="字符串太长了,请输入最长20个字符. "    
  23.                             minLength="4" maxLength="20"    
  24.                             trigger="{myButton}" triggerEvent="click"    
  25.                             />  
  26.     </fx:Declarations>  
  27.        
  28.     <fx:Script>  
  29.         <![CDATA[  
  30.             import com.adobe.serialization.json.JSON;  
  31.               
  32.             import mx.collections.ArrayCollection;  
  33.             import mx.controls.Alert;  
  34.             import mx.events.CloseEvent;  
  35.             import mx.events.ListEvent;  
  36.             import mx.managers.PopUpManager;  
  37.             import mx.rpc.events.ResultEvent;  
  38.             import mx.utils.URLUtil;  
  39.             import mx.validators.Validator;  
  40.               
  41.             import org.osmf.utils.URL;    
  42.             [Bindable]public static var mainApp:DataCenterTargetPreserve = null;       
  43.             [Bindable]public var gsMyString:String;          
  44.             [Bindable]public var gnMyNumber:Number;          
  45.             [Bindable]public var acItemsSelected:Object;  
  46.             [Bindable]  
  47.             public var dataArray:ArrayCollection;   
  48.               
  49.             private function initComponent():void    
  50.             {    
  51.                 var u:URLVariables=new URLVariables("temp="+Math.random());  
  52.                 var r:URLRequest=new URLRequest();  
  53.                 r.data=u;  
  54.                 r.method=URLRequestMethod.POST;  
  55.                 r.url=mainApp.urls+"/findTargetCal.do";  
  56.                   
  57.                 var l:URLLoader=new URLLoader();  
  58.                 l.load(r);  
  59.                 l.addEventListener(Event.COMPLETE, comp2);  
  60.                   
  61.             }    
  62.             function comp2(e:Event):void  
  63.             {  
  64.                 var l:URLLoader=URLLoader(e.target);  
  65.                 var array:Array=JSON.decode(String(l.data)) as Array;  
  66.                 dataArray=new ArrayCollection(array);  
  67.                 myGrid.dataProvider=dataArray;  
  68.             }   
  69.             private function closeWindow():void    
  70.             {    
  71.                 PopUpManager.removePopUp(this);    
  72.             }//closeWindow    
  73.             private function showFinalSelection(oEvent:Event):void    
  74.             {    
  75.                 //mainApp.tiFinalSelection.text = oEvent.target.selectedItem.album;    
  76.             }//showFinalSelection    
  77.  
  78.             protected function button1_clickHandler(event:MouseEvent):void  
  79.             {  
  80.                 PopUpManager.removePopUp(this);    
  81.                   
  82.             }  
  83.  
  84.             protected function button2_clickHandler(event:MouseEvent):void  
  85.             {  
  86.                   
  87.                 var all:Array=Validator.validateAll([sval_1,sval_2]);  
  88.                 if(all.length==0){  
  89.                 var v:URLVariables=new URLVariables("targetTypeName="+targetTypeName.text+"&targetCal="+targetCal.text+"&temp="+Math.random());  
  90.                 var r:URLRequest=new URLRequest();  
  91.                 r.url=mainApp.urls+"/addTargetCal.do";  
  92.                 r.method=URLRequestMethod.POST;  
  93.                 r.data=v;  
  94.                 var l:URLLoader=new URLLoader();  
  95.                 l.load(r);  
  96.                 l.addEventListener(Event.COMPLETE,comp);  
  97.                 }else{  
  98.                   Alert.show("新增失败");  
  99.                 }  
  100.                   
  101.             }  
  102.             private function comp(e:Event):void{  
  103.                 var l:URLLoader = URLLoader(e.target);    
  104.                 var o:Object=URLUtil.stringToObject(l.data,";",true);  
  105.                 if(o.result=="add"){  
  106.                   Alert.show("新增成功");  
  107.                   var obj:Object=(JSON.decode(o.datas) as Object);  
  108.                   //dataArray.addItemAt(obj,0);  
  109.                   Alert.show(obj.targetCalId);  
  110.                 }  
  111.                 initComponent();  
  112.               
  113.             }  
  114.  
  115.             private function myClick(evt:CloseEvent):void{  
  116.                 //Alert.show("本次要删除的为"+mainDataGrid.selectedIndex);  
  117.                 if(evt.detail==Alert.YES){  
  118.                     //Alert.show(acItemsSelected.getItemAt(0).targetId);  
  119.                     var v:URLVariables = new URLVariables("id="+acItemsSelected.targetCalId+"&temp="+Math.random());  
  120.                     var r:URLRequest = new URLRequest();    
  121.                     r.url =mainApp.urls+"/deleteTargetCal.do" ;    
  122.                     r.method = URLRequestMethod.POST;    
  123.                     r.data=v;  
  124.                     var l:URLLoader = new URLLoader();            
  125.                     l.load(r);    
  126.                       
  127.                     //dataArray.removeItemAt(myGrid.selectedIndex);  
  128.                     l.addEventListener(Event.COMPLETE,comp1); //注册请求完成后 响应获取数据事件方法   
  129.                       
  130.                 }  
  131.             }  
  132.             private function comp1(e:Event):void    
  133.             {    
  134.                 var l:URLLoader = URLLoader(e.target);  
  135.                 var o:Object = URLUtil.stringToObject(l.data, ";", true);  
  136.                 if(o.result=="delete"){  
  137.                     Alert.show("删除成功!","友情提示");  
  138.                 }  
  139.                 initComponent();  
  140.                   
  141.             }   
  142.             protected function button3_clickHandler(event:MouseEvent):void  
  143.             {  
  144.                 if(myGrid.selectedItem==null){  
  145.                     Alert.show("请选择一项进行删除","友情提示");  
  146.                 }else{  
  147.                     var dlg_obj:Object=Alert.show("确认删除吗?", "友情提示!", Alert.YES|Alert.NO,null,myClick);  
  148.                 }  
  149.             }  
  150.  
  151.  
  152.             protected function button4_clickHandler(event:MouseEvent):void  
  153.             {  
  154.                   
  155.                 if(myGrid.selectedItem==null){  
  156.                     Alert.show("请选择一项进行修订!","友情提示");  
  157.                 }else{  
  158.                     var v:URLVariables = new URLVariables("targetTypeName="+targetTypeName.text+"&targetCal="+targetCal.text+"&id="+acItemsSelected.targetCalId);  
  159.                     var r:URLRequest = new URLRequest();    
  160.                     r.url =mainApp.urls+"/updateTargetCal.do";    
  161.                     r.method = URLRequestMethod.POST;    
  162.                     r.data = v;    
  163.                     var l:URLLoader = new URLLoader();            
  164.                     l.load(r);    
  165.                     l.addEventListener(Event.COMPLETE,comp3); //注册请求完成后 响应获取数据事件方法   
  166.                 }  
  167.             }  
  168.             private function comp3(e:Event):void    
  169.             {    
  170.                   
  171.                 var l:URLLoader = URLLoader(e.target);    
  172.                 var o:Object = URLUtil.stringToObject(l.data, ";", true);         
  173.                 if(o.result=="update"){  
  174.                     Alert.show("更新成功!","友情提示");  
  175.                     var obj:Object=(JSON.decode(o.datas) as Object);  
  176.                     //dataArray.setItemAt(obj,myGrid.selectedIndex);  
  177.                 }else{  
  178.                     Alert.show("操作失败!","友情提示");  
  179.                 }  
  180.                 initComponent();  
  181.             }    
  182.  
  183.             protected function myGrid_itemClickHandler(event:ListEvent):void  
  184.             {  
  185.                 acItemsSelected =myGrid.selectedItem;  
  186.             }  
  187.  
  188.         ]]>  
  189.     </fx:Script>  
  190.     <mx:Form width="651" height="282">  
  191.         <mx:DataGrid width="616" height="160" id="myGrid" itemClick="myGrid_itemClickHandler(event)">  
  192.             <mx:columns>  
  193.                 <mx:DataGridColumn headerText="计量名称" dataField="targetTypeName"/>  
  194.                 <mx:DataGridColumn headerText="计量符号" dataField="targetCal"/>  
  195.                 <mx:DataGridColumn visible="false" dataField="targetCalId" />  
  196.             </mx:columns>  
  197.         </mx:DataGrid>  
  198.         <mx:HBox>  
  199.             <s:Label  width="33"/>  
  200.             <mx:FormItem label="计量名称" >  
  201.                 <s:TextInput id="targetTypeName"/>  
  202.             </mx:FormItem>  
  203.             <mx:FormItem label="计量符号" >  
  204.                 <s:TextInput id="targetCal"/>  
  205.             </mx:FormItem>  
  206.             <mx:FormItem >  
  207.                 <s:Button label="新增" id="myButton" click="button2_clickHandler(event)" />  
  208.             </mx:FormItem>  
  209.                
  210.         </mx:HBox>  
  211.         <mx:FormItem >  
  212.         </mx:FormItem>  
  213.            
  214.         <mx:HBox>  
  215.             <s:Label  width="250"/>  
  216.             <mx:FormItem >  
  217.                 <s:Button label="删除" click="button3_clickHandler(event)"/>  
  218.             </mx:FormItem>  
  219.             <mx:FormItem >  
  220.                 <s:Button label="修改" click="button4_clickHandler(event)"/>  
  221.             </mx:FormItem>  
  222.             <mx:FormItem >  
  223.                 <s:Button label="刷新"/>  
  224.             </mx:FormItem>  
  225.             <mx:FormItem >  
  226.                 <s:Button label="关闭" click="button1_clickHandler(event)"/>  
  227.             </mx:FormItem>  
  228.         </mx:HBox>  
  229.            
  230.     </mx:Form>  
  231. </s:TitleWindow>  
  232. </SPAN>  

 

关于上面这个程序的mainApp就不用管它,它只是主应用程序而已,细心的可以发现这个是个弹出窗口程序

 关于这个程序的三个Servletet处理类【只贴上关键代码】

FindTargetCalServlet

Java代码 复制代码
  1. <SPAN style="FONT-SIZE: medium">public void doPost(HttpServletRequest request, HttpServletResponse response)   
  2.             throws ServletException, IOException {   
  3.         request.setCharacterEncoding("UTF-8");   
  4.         TTargetCalDAO dao=new TTargetCalDAO();   
  5.         List<TTargetCal> cals=dao.findAll();   
  6.         JSONArray json = JSONArray.fromObject(cals);   
  7.         String datas = json.toString();   
  8.         System.out.println(datas);   
  9.         System.out.println(datas);   
  10.         response.setCharacterEncoding("UTF-8");   
  11.         response.getWriter().write(datas);   
  12.            
  13.     }</SPAN>  

 

DeleteTargetCalServlet

Java代码 复制代码
  1. <SPAN style="FONT-SIZE: medium">public void doPost(HttpServletRequest request, HttpServletResponse response)   
  2.             throws ServletException, IOException {   
  3.         TTargetCalDAO dao = new TTargetCalDAO();   
  4.         String id = request.getParameter("id");   
  5.         if (DataOptUtils.isNotNull(id)) {   
  6.             TTargetCal rr = dao.findById(Integer.valueOf(id));   
  7.             dao.delete(rr);   
  8.         }   
  9.         response.setCharacterEncoding("UTF-8");   
  10.         response.getWriter().write("result=delete");   
  11.   
  12.     }</SPAN>  

 

AddTargetCalServlet

Java代码 复制代码
  1. <SPAN style="FONT-SIZE: medium">public void doPost(HttpServletRequest request, HttpServletResponse response)   
  2.             throws ServletException, IOException {   
  3.             request.setCharacterEncoding("UTF-8");   
  4.             TTargetCalDAO dao=new TTargetCalDAO();   
  5.             String targetCal=request.getParameter("targetCal");   
  6.             String targetTypeName=request.getParameter("targetTypeName");   
  7.             TTargetCal cal=new TTargetCal();   
  8.             cal.setTargetCal(targetCal);   
  9.             cal.setTargetTypeName(targetTypeName);   
  10.             dao.save(cal);   
  11.             TTargetCal re =dao.findById(dao.findLastId());   
  12.             JSONObject json = JSONObject.fromObject(re);   
  13.             String datas = json.toString();   
  14.             response.getWriter().write("result=add;datas=" + datas);   
  15.            
  16.   
  17.     }</SPAN>  

 

UpdateTargetCalServlet

Java代码 复制代码
  1. <SPAN style="FONT-SIZE: medium">public void doPost(HttpServletRequest request, HttpServletResponse response)   
  2.             throws ServletException, IOException {   
  3.          request.setCharacterEncoding("UTF-8");   
  4.             response.setCharacterEncoding("UTF-8");   
  5.             TTargetCalDAO dao = new TTargetCalDAO();   
  6.             String targetTypeName = request.getParameter("targetTypeName");   
  7.             String targetCal = request.getParameter("targetCal");   
  8.             String id = request.getParameter("id");   
  9.             if (DataOptUtils.isNotNull(id)) {   
  10.                 TTargetCal rr = dao.findById(Integer.valueOf(id));   
  11.                 if(DataOptUtils.isNotNull(targetCal)){   
  12.                     rr.setTargetCal(targetCal);   
  13.                 }   
  14.                 if(DataOptUtils.isNotNull(targetTypeName)){   
  15.                     rr.setTargetTypeName(targetTypeName);   
  16.                 }   
  17.                 dao.merge(rr);   
  18.                 TTargetCal tc = dao.findById(rr.getTargetCalId());   
  19.                 JSONObject json = JSONObject.fromObject(tc);   
  20.                 String datas = json.toString();   
  21.                 response.getWriter().write("result=update;datas=" + datas);   
  22.             }   
  23.                
  24.   
  25.     }</SPAN>  

 这里的DataOptUtils是我写的一个数据处理类,判断是否为空什么的

 还有就是TTargetCal

Java代码 复制代码
  1. <SPAN style="FONT-SIZE: medium">@Entity  
  2. @Table(name = "t_target_cal", catalog = "sxtele")   
  3. public class TTargetCal implements java.io.Serializable {   
  4.   
  5.     // Fields   
  6.   
  7.     private Integer targetCalId;   
  8.     private String targetCal;   
  9.     private String targetTypeName;   
  10.   
  11.     // Constructors   
  12.   
  13.     /** default constructor */  
  14.     public TTargetCal() {   
  15.     }   
  16.   
  17.     /** minimal constructor */  
  18.     public TTargetCal(String targetCal) {   
  19.         this.targetCal = targetCal;   
  20.     }   
  21.   
  22.     /** full constructor */  
  23.     public TTargetCal(String targetCal, String targetTypeName) {   
  24.         this.targetCal = targetCal;   
  25.         this.targetTypeName = targetTypeName;   
  26.     }   
  27.   
  28.     // Property accessors   
  29.     @Id  
  30.     @GeneratedValue  
  31.     @Column(name = "Target_cal_id", unique = true, nullable = false)   
  32.     public Integer getTargetCalId() {   
  33.         return this.targetCalId;   
  34.     }   
  35.   
  36.     public void setTargetCalId(Integer targetCalId) {   
  37.         this.targetCalId = targetCalId;   
  38.     }   
  39.   
  40.     @Column(name = "Target_cal", nullable = false, length = 50)   
  41.     public String getTargetCal() {   
  42.         return this.targetCal;   
  43.     }   
  44.   
  45.     public void setTargetCal(String targetCal) {   
  46.         this.targetCal = targetCal;   
  47.     }   
  48.   
  49.     @Column(name = "Target_type_name", length = 50)   
  50.     public String getTargetTypeName() {   
  51.         return this.targetTypeName;   
  52.     }   
  53.   
  54.     public void setTargetTypeName(String targetTypeName) {   
  55.         this.targetTypeName = targetTypeName;   
  56.     }   
  57.   
  58. }</SPAN>  

抱歉!评论已关闭.