使用HTTPService加载DataGrid数据源-DataGrid系列示例

发布于，归属于flex实例。 前4个座位已被强势霸占！ 共有675人围观    

接下来这段时间，开始研究flex的DataGrid的组件。此组件实在太强大，是有事非常常用的组件。示例中DataGrid的数据源来自人民网的新闻rss。

先来看演示：

来看源代码：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()">
  3.     <mx:Style>
  4.         Application{fontSize:12;}
  5.     </mx:Style>
  6.     <mx:Script>
  7.         <![CDATA[
  8.             import mx.rpc.events.FaultEvent;
  9.             import mx.collections.ArrayCollection;
  10.             import mx.rpc.events.ResultEvent;
  11.             [Bindable]
  12.             private var homesForSale:ArrayCollection;
  13.             private function initApp():void{
  14.                 this.srv.send();
  15.             }
  16.             internal function completeHandler(evt:ResultEvent):void{
  17.                 grid.dataProvider = evt.result.rss.channel.item;
  18.             }   
  19.             internal function errorHandler(evt:FaultEvent):void{
  20.                 trace("error:"+evt.fault);
  21.             }   
  22.         ]]>
  23.     </mx:Script>
  24.     <mx:HTTPService id="srv" url="http://www.people.com.com/rss/world.xml" result="completeHandler(event)" showBusyCursor="true" fault="errorHandler(event)" />
  25.     <mx:DataGrid id="grid" width="500" height="400" >
  26.         <mx:columns>
  27.             <mx:DataGridColumn headerText="标题" dataField="title" />
  28.             <mx:DataGridColumn headerText="链接" dataField="link" />
  29.             <mx:DataGridColumn headerText="发布日期" dataField="pubDate" />
  30.         </mx:columns>
  31.     </mx:DataGrid>
  32.  
  33. </mx:Application>

关键知识点说明:

  1. HTTPService的用法。此组件是向后台请求数据的关键。send()方法会向后台自动请求数据。result属性值十个回调函数。当在加载完成后运行。
  2. DataGrid的创建。columns是必不可少的头部。

来看关键的AS代码

  1. internal function completeHandler(evt:ResultEvent):void{
  2.                 grid.dataProvider = evt.result.rss.channel.item;
  3.             }

此函数再数据加载完毕后运行（返回的是xml数据）。
grid.dataProvider = evt.result.rss.channel.item;指定DataGrid的数据源。指向xml对象中所有item标签。

数据是加载成功的，但还无法完全满足需求。比如数据格式、分页等等。下次示例奉上。

（如果您喜欢这篇教程，可以通过支付宝打赏我们1元哦，拜谢！）

跟作者说两句

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-? :) :( :!: 8-O 8)

4个座位已被强势霸占！

  1. Радиотехник

    Промто ! ;) Сегодня по Спорту будет трансляции Матчи Уефа – Не пропустите ! Играют Центральный Спортивный Клуб Армии и Спартак.

  2. Рыба

    хм…ну это памойму уже крайность…

  3. GamePlay

    ha ))

  4. grireeleasy

    +1

同类