浏览 3559 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2008-06-24
最后修改:2009-03-22
前面已经介绍如何使用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代码。 效果图:
声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |
发表时间:2009-04-09
请问下 我也照着你这样写了段代码为何读取不到数据、?只显示"正在读取...请稍候"; 而且我debug也没效果。。。。不知道是为什么。。。帮我下,,,
|
|
返回顶楼 | |
发表时间:2009-04-09
哦,建议你把那个remote的错误打印出来,估计是你没有在remoteXXX.xml中设置destination等
|
|
返回顶楼 | |
发表时间: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; } |
|
返回顶楼 | |