使用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

阅读更多
个人分类: Flex
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭