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,”p_w_picpathPath”:”C0002Comp0001.png”,”status”:0},{“id”:”C0003″,”name”:”李四”,”ownerName”:”嘿嘿”,”ownerTel”:null,”rootId”:400,”p_w_picpathPath”:null,”status”:0}]