使用Flex,Java，Json更新Mysql数据【高级篇】

前面已经介绍如何使用Flex,java,json来更新datagrid中的数据。详细请见：使用Flex,Java，Json更新Mysql数据 【2】 和使用Flex,Java，Json更新Mysql数据【1】 。但是有一个问题就是在更新的时候都是发送整个datagrid的dataprovider中信息到数据库，无论有的资料并没有需要更新，这样处理起来效率就很低了。所在在高级篇中我想传递的数据只是用户更新的那部分。这样效率就会明显提高了。

 

 首先还是来看后台处理：这次我们除了原有的更新数据的功能，我们将增加删除功能【用户通过delete键删除datagrid中行】。我们的数据传输格式还是json.所以在后台读取的部分保持不变，数据格式更前面的一样，主要是修改更新那部分：

 

public String sendJsonArray(String jsonData){
        String result= new String();
        //jsonData = jsonData.replace("\\", "");

       JSONArray jsonArray = JSONArray.fromObject(jsonData);
      System.out.println(jsonArray.toString());
       try{
           Connection conToDb = conToDB();
           Statement stmt = conToDb.createStatement();
       for(int i=0;i<jsonArray.size();i++){
           JSONObject jsonObject = JSONObject.fromObject(jsonArray.getString(i));
           String operation = jsonObject.getString("operation");

           if(operation.equals("update")){
               String name = jsonObject.getString("name");
               String id = jsonObject.getString("id");
               stmt.executeUpdate("update employee set name='"+name+"' where id='"+id+"'");
               result="恭喜，成功更新"+name+"数据！";
               System.out.println(result);
           }else if(operation.equals("delete")){
               String id = jsonObject.getString("id");
               stmt.executeUpdate("delete from employee where id = '"+id+"'");
                result="恭喜，成功删除"+id+"数据!";
           }
           //String name = jsonObject.getString("name");

           //stmt.executeUpdate("update employee set name='"+name+"' where id='"+id+"'");

       }

        conToDb.close();
       }catch(Exception e){
           result = e.getLocalizedMessage();
       }
      return result;
    }

 我们传递过来的数据经过json解码之后的格式如下：

[{"operation":"delete","id":"MS009"},{"operation":"update","id":"MS008","name":"Luciya6"}]

 

有一个operation选项：这个决定是执行更新还是删除操作，更新就包括id,name了。如果是删除就只有id这个数据。至于数据库操作起来就很简单了。看代码就可以了。操作成功我们有一个返回值：“恭喜，成功更新Luciya6数据！”返回给Flex界面。

接下来解析前台的处理。前台的界面设计还是跟前面的一样，不过增加了一个组件checkbox：用于提供自动更新功能【用户无需手动点击更新按钮】。

<mx:CheckBox id="chkAutoUpdate" x="391" y="268" label="Auto"/>

 原先我们的做法是在dataProvider上直接赋值，那么这次我们就需要另外顶一个类似dataProvider类型的[ArrayCollection]的数组了，这里叫做dataToUpdate;所以在初始化中增加：

private function initDataGrid():void{
      dataArray = new ArrayCollection();
      dataToUpdate = new ArrayCollection;//用来保存用户更新部分数据
          getData.getOperation('getJsonArray').send();
    }

 同时呢，我们开始监听dataProvider中书的数据dataArray的修改的动作。

private function getJsonData(event:ResultEvent):void{
      var rawArray:Array;
      var arraySize:int;
      var rawData:String = event.result as String;
      rawArray = JSON.decode(rawData) as Array;
      dataArray = new ArrayCollection(rawArray);
      arraySize = dataArray.length;
      lblStatus.text="读取成功,总共"+arraySize+"条员工信息";
      dataArray.addEventListener(CollectionEvent.COLLECTION_CHANGE,dataChanged);//监听操作
    }

 

接下来我们定义dataChanged方法：

该方法主要是用来监听修改操作，一旦用户在datagrid中修改数据，就会触发 CollectionEvent.COLLECTION_CHANGE事件，然后根据事件的类型，这里只考虑update类型，如果是update类型执 行记录用户更新的部分资料，然后保存到dataToUpdate数组中：

private function dataChanged(event:CollectionEvent):void{
      var item:Object;
      var updatedObj:Object;
      var i:int;
      if(event.kind == CollectionEventKind.UPDATE){
        for(i=0;i < event.items.length;i++){


          updatedObj = new Object;
          updatedObj.operation = "update"
          updatedObj.id = dgData.selectedItem.id;//get the id

          updatedObj.name =dgData.selectedItem.name;//name
          dataToUpdate.addItem(updatedObj);//push it into array
        }

 这里我们处理完了更新部分，接下来处理键盘的delte事件，首先在dataGrid中添加keyUp事件处理：

<mx:DataGrid id="dgData" toolTip="姓名可编辑" x="10" y="10" width="436" height="250" dataProvider="{dataArray}"
       creationComplete="{initDataGrid()}" editable="true" itemEditEnd="{checkName(event)}" verticalScrollPolicy="on"
        keyUp="checkKeyPress(event)">

 然后具体定义checkKeyPress()事件：

private function checkKeyPress(event:KeyboardEvent):void{
      if(event.keyCode == Keyboard.DELETE){
        var data:ArrayCollection = dgData.dataProvider as ArrayCollection;
        if(dgData.selectedIndex>=0 && dgData.selectedIndex<data.length){
            //save the data before removed
             var updatedObj:Object = new Object;
             updatedObj.operation = "delete";
             updatedObj.id = dgData.selectedItem.id;
             dataToUpdate.addItem(updatedObj);
          data.removeItemAt(dgData.selectedIndex);
        }
      }
    }

 同样把要删除的那行数据先保存到要更新的数组中，然后执行removeItemAt()方法移除那行。这样所有要更新或者要删除的数据都保存在了 dataToUpate数组中。当然我们分别定义了operation的内容，后台程序也会更具operation的内容执行具体的操作。最后是发送数据 给后台程序：我们使用的是remoteObject方法，这里不继续讲了【参考签两篇文章】，给出代码：

private function sendDataAction():void{
      var dataString:String;
      var objSend:Object = new Object();
      if(dataToUpdate.length==0){
          lblStatus.text="没有数据改动...!";
      }else{
      dataString = JSON.encode(dataToUpdate.toArray());
      sendData.sendJsonArray(dataString);
      //clear the dataArray for new operation
      dataToUpdate.removeAll();
      lblStatus.text="正在更新，请稍候...";
      }
    }

 

很简单，把ArrayCollection转化为Array,然后用json的encode方式转化成json格式传输。后台处理也只要更具getString(property)方式拿到对应的值就可以了，参考前面给出的java代码。

效果图：

 

附件下载：http://download.csdn.net/source/511770

评论

3 楼 yexin218 2009-04-09  

remoteOject fault错误打印出来

<mx:RemoteObject id="findRoom"  destination="findRoomInfo" showBusyCursor="true" result="showRoomInfo(event)" fault="faultHandler(event)"/>

public function faultHandler(fault:FaultEvent):void{
				g_msg.text ="code:\n" + fault.fault.faultCode + "\n\nMessage:\n" + fault.fault.faultString + "\n\nDetail:\n" + fault.fault.faultDetail;
			}

2 楼 yexin218 2009-04-09  

哦，建议你把那个remote的错误打印出来，估计是你没有在remoteXXX.xml中设置destination等

1 楼 dongqdong 2009-04-09  

请问下 我也照着你这样写了段代码为何读取不到数据、？只显示"正在读取...请稍候"; 而且我debug也没效果。。。。不知道是为什么。。。帮我下，，，