フレックス3のデータグリッドの行を制限する方法は？

Question

私は3列の&多くの行からなるデータグリッドを持っています、私は最初の20行だけをユーザーに表示したいと思います。データグリッドに最初の20行だけを表示する方法はありますか？ボタン「次へ」をクリックした後、次の20行が表示されます。

Answer 1

データプロバイダとしてリストがある場合（ArrayCollectionあなたのリストをフィルタリングするにはuse filterFunctionできます。

サンプルコードはここにある：

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application initialize="init()" layout="absolute" minHeight="600" minWidth="955" 
    xmlns:mx="http://www.adobe.com/2006/mxml"> 
    <mx:Script> 
    <![CDATA[ 
     import mx.collections.ArrayCollection; 
     import mx.utils.StringUtil; 

     private static const DP_LENGTH:int = 100; 
     private static const VISIBLE_ROWS_COUNT:int = 20; 

     [Bindable] 
     private var currentPage:int = 0; 

     [Bindable] 
     private var dataProvider:ArrayCollection; 

     protected function init():void 
     { 
      var dpArray:Array = []; 
      for (var i:int = 0; i < DP_LENGTH; i++) 
      { 
       var item:Object = { first: i, second: Math.random(), third: Math.random() }; 
       dpArray.push(item); 
      } 
      dataProvider = new ArrayCollection(dpArray); 
      dataProvider.filterFunction = pagingFilterFunction; 
      dataProvider.refresh(); 
     } 

     protected function nextPage():void 
     { 
      currentPage++; 
      dataProvider.refresh(); 
     } 

     protected function prevPage():void 
     { 
      currentPage--; 
      dataProvider.refresh(); 
     } 

     private function pagingFilterFunction(item:Object):Boolean 
     { 
      var start:int = currentPage * VISIBLE_ROWS_COUNT; 
      var end:int = start + VISIBLE_ROWS_COUNT - 1; 
      var index:int = dataProvider.getItemIndex(item); 
      return (index >= start) && (index <= end); 
     } 
    ]]> 
    </mx:Script> 
    <mx:VBox horizontalAlign="center" horizontalCenter="0" verticalCenter="0"> 
     <mx:DataGrid dataProvider="{dataProvider}"> 
      <mx:columns> 
       <mx:DataGridColumn dataField="first" headerText="First" /> 
       <mx:DataGridColumn dataField="second" headerText="Second" /> 
       <mx:DataGridColumn dataField="third" headerText="Third" /> 
      </mx:columns> 
     </mx:DataGrid> 
     <mx:Label 
      text="{StringUtil.substitute('Page {0} of {1}', currentPage + 1, Math.floor ((DP_LENGTH - 1)/VISIBLE_ROWS_COUNT) + 1)}" /> 
     <mx:HBox> 
      <mx:Button click="prevPage()" enabled="{currentPage > 0}" label="Prev" /> 
      <mx:Button click="nextPage()" enabled="{DP_LENGTH/VISIBLE_ROWS_COUNT - 1 > currentPage}" label="Next" /> 
     </mx:HBox> 
    </mx:VBox> 
</mx:Application>