现在的位置: 首页 > 综合 > 正文

利用ArrayCollection实现对现有数据过滤显示

2018年01月26日 ⁄ 综合 ⁄ 共 1280字 ⁄ 字号 评论关闭

    当我们组织条件查询数据的时候,一般需要重新访问数据库,但有些时候因为数据量比较大,或者只是对已经存在的数据进行过滤显示时,筛选的过程就自然放在前端界面了。Flex作为强大界面展示,自然也可以做到这一点。以ArrayCollection为例,当数据源始ArrayCollection时,我们可以利用ArrayCollection的filterFunction成功实现对数据源的过滤显示。例子代码如下:

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
          layout="vertical"
          verticalAlign="middle">
 <mx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
  
   [Bindable]
   private var arr:ArrayCollection = new ArrayCollection([{useName:"natian",team:"ShenLong"},
                   {useName:"bryant",team:"Lakers"},
                   {useName:"paul",team:"Vespid"},
                   {useName:"yaoming",team:"Bees"}]);
   
   private function inputChange():void {
    arr.filterFunction = arrFilterFunction;
    arr.refresh();
   }
   
   private function arrFilterFunction(item:Object):Boolean {
    var seachSrc:String = input.text.toLowerCase();
    var itemSrc:String = ((item.useName) as String).toLowerCase();
    return itemSrc.indexOf(seachSrc) > -1;
   }
   
  ]]>
 </mx:Script>
 <mx:TextInput id="input" change="inputChange()"/>
 <mx:DataGrid dataProvider="{arr}" height="82">
  <mx:columns>
   <mx:DataGridColumn headerText="姓名" dataField="useName"/>
   <mx:DataGridColumn headerText="球队" dataField="team"/>
  </mx:columns>
 </mx:DataGrid>
</mx:Application>

效果如图:

 

 

抱歉!评论已关闭.