Flex中利用HSlider控件和ArrayCollection类的filterFunction属性对DataGrid中的数据进行过滤的例子

By Minidxer | September 13, 2008

和前面Flex中利用CheckBox对DataGrid控件中的项目进行过滤的例子类似的，接下来的例子演示了Flex中如何利用HSlider控件和ArrayCollection类的filterFunction属性，对DataGrid中的数据进行过滤。

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：


下面是完整代码(或点击这里察看)：

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         layout="vertical"
  4.         verticalAlign="middle"
  5.         backgroundColor="white"
  6.         creationComplete="init();">
  7.  
  8.     <mx:Script>
  9.         <![CDATA[
  10.             import mx.events.SliderEvent;
  11.  
  12.             private function init():void {
  13.                 if (checkBox.selected) {
  14.                     arrColl.filterFunction = sliderFilterFunc;
  15.                     arrColl.refresh();
  16.                 }
  17.             }
  18.  
  19.             private function checkBox_change(evt:Event):void {
  20.                 if (checkBox.selected) {
  21.                     arrColl.filterFunction = sliderFilterFunc;
  22.                 } else {
  23.                     arrColl.filterFunction = null;
  24.                 }
  25.                 arrColl.refresh();
  26.             }
  27.  
  28.             private function slider_change(evt:SliderEvent):void {
  29.                 arrColl.refresh();
  30.             }
  31.  
  32.             private function sliderFilterFunc(item:Object):Boolean {
  33.                 var minSlider:uint = slider.values[0];
  34.                 var maxSlider:uint = slider.values[1];
  35.                 if ((item.value >= minSlider) &&
  36.                             (item.value <= maxSlider)) {
  37.                     return true;
  38.                 } else {
  39.                     return false;
  40.                 }
  41.             }
  42.         ]]>
  43.     </mx:Script>
  44.  
  45.     <mx:ArrayCollection id="arrColl">
  46.         <mx:source>
  47.             <mx:Array>
  48.                 <mx:Object label="One" value="100" />
  49.                 <mx:Object label="Two" value="2" />
  50.                 <mx:Object label="Three" value="300" />
  51.                 <mx:Object label="Four" value="40" />
  52.                 <mx:Object label="Five" value="500" />
  53.                 <mx:Object label="Six" value="60" />
  54.                 <mx:Object label="Seven" value="700" />
  55.                 <mx:Object label="Eight" value="800" />
  56.                 <mx:Object label="Nine" value="90" />
  57.                 <mx:Object label="Ten" value="100" />
  58.             </mx:Array>
  59.         </mx:source>
  60.     </mx:ArrayCollection>
  61.  
  62.     <mx:ApplicationControlBar dock="true">
  63.         <mx:Form styleName="plain">
  64.             <mx:FormItem label="filter:">
  65.                 <mx:CheckBox id="checkBox"
  66.                         selected="true"
  67.                         change="checkBox_change(event);" />
  68.             </mx:FormItem>
  69.             <mx:FormItem label="values:">
  70.                 <mx:HSlider id="slider"
  71.                         minimum="0"
  72.                         maximum="1000"
  73.                         values="[0,1000]"
  74.                         labels="[0,500,1000]"
  75.                         thumbCount="2"
  76.                         showTrackHighlight="true"
  77.                         snapInterval="1"
  78.                         tickInterval="100"
  79.                         liveDragging="true"
  80.                         change="slider_change(event);" />
  81.             </mx:FormItem>
  82.         </mx:Form>
  83.     </mx:ApplicationControlBar>
  84.  
  85.     <mx:Panel status="{arrColl.length}/{arrColl.source.length} item(s)">
  86.         <mx:DataGrid id="dataGrid"
  87.                 dataProvider="{arrColl}"
  88.                 verticalScrollPolicy="on" />
  89.     </mx:Panel>
  90.  
  91. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Flex | Tags: , , ,

Related Post

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll

Sponsored Ads