FLEX DataGride请求后台解析数据

 FLEX DataGride请求后台,解析显示数据

  
  
  
  
  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <s:Application 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" minWidth="550" minHeight="500"> 
  5.      
  6.     <fx:Declarations> 
  7.         <s:HTTPService id="company" url="后台请求路径"  
  8.                        method="POST" showBusyCursor="true" 
  9.                         result="companyHandler(event);" 
  10.                         fault="faulHandler(event)" 
  11.                         resultFormat="text" 
  12.                        /> 
  13.     </fx:Declarations> 
  14.      
  15.     <fx:Script> 
  16.         <![CDATA[ 
  17.             import mx.collections.ArrayCollection; 
  18.             import mx.controls.Alert; 
  19.             import mx.rpc.events.FaultEvent; 
  20.             import mx.rpc.events.ResultEvent; 
  21.  
  22.  
  23.             [Bindable] 
  24.             public var companyStock:ArrayCollection; 
  25.              
  26.             /** 
  27.              * 成功返回 
  28.              */ 
  29.             private function companyHandler(evt:ResultEvent):void{ 
  30.                 companyStock = new ArrayCollection(JSON.parse(String(evt.result)) as Array); 
  31.             } 
  32.              
  33.             /** 
  34.              * 发送请求 
  35.              */ 
  36.              private function getAllCompany():void{ 
  37.                 company.send(); 
  38.              } 
  39.              
  40.             /** 
  41.              * 异常方法 
  42.              */ 
  43.             private function faulHandler(evt:FaultEvent):void{ 
  44.                 var faultMessage:String = "Could not connect with XML file"+ evt.messageId; 
  45.                  Alert.show(faultMessage,"Error opening file"); 
  46.             } 
  47.              
  48.             public function deletedate():void{   
  49.                 var item:Object=dg.selectedItem;   
  50.                 var i:int=companyStock.getItemIndex(item);   
  51.                 companyStock.removeItemAt(i);   
  52.             }   
  53.             public function update():void{   
  54.                 var item:Object=dg.selectedItem;   
  55.             }   
  56.         ]]> 
  57.          
  58.     </fx:Script> 
  59.      
  60.     <s:Panel title="分户管理" 
  61.              width="678" height="460"  
  62.              horizontalCenter="0" verticalCenter="0"> 
  63.         <s:VGroup left="10" right="10" top="10" bottom="10"> 
  64.             <s:HGroup  width="100%" horizontalAlign="right"> 
  65.                 <mx:Button label="回收站" /> 
  66.             </s:HGroup> 
  67.             <mx:DataGrid id="dg" width="655" height="350" rowCount="5" dataProvider="{companyStock}"> 
  68.                 <mx:columns> 
  69.                     <mx:DataGridColumn dataField="id" headerText="公司ID" width="50" textAlign="center"/> 
  70.                     <mx:DataGridColumn dataField="name"  headerText="公司名称" width="230" textAlign="center"/> 
  71.                     <mx:DataGridColumn dataField="ownerName" headerText="总经理"/> 
  72.                     <mx:DataGridColumn dataField="ownerTel" headerText="联系电话"/> 
  73.                     <mx:DataGridColumn headerText="操作"  width="185">   
  74.                         <mx:itemRenderer>   
  75.                             <fx:Component> 
  76.                                 <mx:HBox> 
  77.                                     <mx:Button width="45" label="查看" click="outerDocument.update()" fontSize="12"/> 
  78.                                     <mx:Button width="65" label="更新" click="outerDocument.update()" fontSize="12"/> 
  79.                                     <mx:Button width="45" label="删除" click="outerDocument.deletedate()" fontSize="12"/>  
  80.                                 </mx:HBox> 
  81.                             </fx:Component> 
  82.                         </mx:itemRenderer>   
  83.                     </mx:DataGridColumn>   
  84.                 </mx:columns> 
  85.             </mx:DataGrid> 
  86.             <mx:Button label="查询" click="getAllCompany();"/> 
  87.         </s:VGroup> 
  88.     </s:Panel> 
  89.  
  90.      
  91. </s:Application> 

后台返回的数据格式:

[{"id":"C0002","name":"张三","ownerName":"娃哈哈","ownerTel":"11","rootId":0,"imagePath":"C0002Comp0001.png","status":0},{"id":"C0003","name":"李四","ownerName":"嘿嘿","ownerTel":null,"rootId":400,"imagePath":null,"status":0}]

你可能感兴趣的:(Flex,DataGride,请求后台解析数据)