`
ckf53390
  • 浏览: 28421 次
文章分类
社区版块
存档分类
最新评论

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

 
阅读更多

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

 

分享到：
| Flex将dataGrid数据复制到系统剪贴板
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    wpf通过datagrid操作数据库，实现datagrid增删改操作。

    在本文中，我们将深入探讨如何在WPF（Windows Presentation Foundation）环境中使用DataGrid控件来操作数据库，实现数据的添加、删除和修改功能。DataGrid是WPF中的一个强大控件，它允许用户以表格的形式展示和编辑...

    Flex4之DataGrid四个的示例【客户端和服务器端】

    总结起来，"Flex4之DataGrid四个的示例【客户端和服务器端】"这一主题涵盖了使用Flex4的DataGrid组件展示和处理数据的基本技巧，包括客户端数据绑定、服务器端交互以及JSON数据的使用。通过具体的示例，开发者可以...

    Wpf datagrid 增删改查

    本例子是wpf中datagrid的增加修改，对于datagrid中的canuseraddrows=true，对当前空白行进行的添加数据，修改时，鼠标离开焦点可自动更新数据库，删除等等。不需要多余的界面进行添加修改等，利用datagrid的属性，...

    datagrid增删改

    // 示例：从数据库获取数据并绑定到datagrid DataTable dt = GetDataFromDB(); dataGridView1.DataSource = dt; ``` 2. **数据列自动生成**：当数据源绑定后，datagrid会自动根据数据源的字段生成对应的列。若需...

    silverlight4 DataGrid控件 增删改 全选

    本知识点将深入探讨如何在Silverlight 4中使用DataGrid进行数据的增、删、改以及全选操作。 首先，DataGrid控件是基于WPF中的同名控件，并在Silverlight中得到了优化。它提供了强大的数据绑定能力，可以与各种数据...

    datagrid的增删改

    本教程将通过一个简单的示例来阐述如何实现`datagrid`的增删改功能，主要涉及的技术点包括ASP.NET页面生命周期、数据绑定以及事件处理。 首先，`datagrid`控件在ASP.NET中是一个强大的组件，它能够将数据库中的数据...

    Flex 动态给DataGrid增加行

    Flex 动态给DataGrid增加行，可编辑行数据

    flex 页面增删改以及柱形数据变化

    本篇文章将深入探讨如何使用Flex技术来实现页面上的数据操作，包括增、删、改、查，以及柱形图数据的变化，并且不依赖于数据库。我们将讨论Flex的基本概念、数据绑定、事件处理、界面设计以及图形渲染。 首先，让...

    flex显示数据库数据

    在本场景中，我们讨论的是如何在Flex 4中利用Myeclipse 9.0集成开发环境，从MySQL数据库中获取数据，并通过DataGrid组件在Flex页面上展示这些数据。这个过程涉及到多个技术栈，包括Java、Mysql数据库、Tomcat服务器...

    flex组件之DataGrid高级用法实例源码

    在Flex编程领域，DataGrid组件是开发者们常用的数据展示工具，尤其在处理大量结构化数据时，它能提供高效、可定制化的展示效果。本文将深入探讨Flex DataGrid的高级用法，通过实例源码来解析其核心特性，帮助开发者...

    FLEX的datagrid合计、平均值

    在Flex开发中，Datagrid组件是用于展示数据集的一个强大工具，它允许用户以表格的形式查看和操作数据。本文将深入探讨如何在Flex的Datagrid中实现数据的合计与平均值计算，帮助开发者更好地理解和应用这些功能。 ...

    DataGrid 与数据库的连接 实现增删改功能

    在.NET框架中，DataGrid控件是一个非常实用的组件，常用于显示和操作数据库中的数据。本教程将详细讲解如何使用Visual Studio 2010（VS2010）中的DataGrid控件来实现与数据库的连接，并完成数据的添加、删除和修改...

    Flex4 DataGrid控件行编辑项目

    在Flex4.6开发环境中，DataGrid控件是用于展示数据集合的重要组件，它提供了丰富的功能，如排序、分页和自定义列显示。在这个项目中，我们关注的是如何实现DataGrid的行编辑功能，特别是在行中嵌套ComboBox控件以...

    flex中dataGrid导出数据到excel中

    flex中dataGrid导出数据到excel中，不存在乱码问题

    flex基于datagrid控件的增删改查及分页实现

    在本主题中，“基于datagrid控件的增删改查及分页实现”是一个常见的需求，特别是在开发数据密集型的Web应用时。下面将详细介绍这个主题中的相关知识点。 1. Flex DataGrid 控件： DataGrid是Flex中一个强大的组件...

    Flex DataGrid从XML文件中加载数据

    总结来说，这个Flex应用通过`HTTPService`从XML文件获取数据，然后将数据绑定到`DataGrid`组件上，从而实现动态加载和展示XML数据的功能。这种方式在实际项目中非常常见，特别是在需要从服务器获取结构化数据并显示...

    VB 绑定数据到DataGrid显示的数据库实例.rar

    这是一个在VB中使用 数据库绑定控件DataGrid的实例，演示了如何将从数据库中读取出的数据显示到DataGrid控件中。本例子中包括了很多ADO 操作数据库方面的基本操作，是新手学习VB环境下的ado操作的好范例，比如添加、...

Magicbox
Global site tag (gtag.js) - Google Analytics