6.4.過(guò)濾DataGrid數(shù)據(jù)項(xiàng)

2024-04-27 13:52:40

字體：大中小

供稿：網(wǎng)友

本章用到的 Flex3中文教程--homesforsale.xml文件
6.4.1. 問(wèn)題
我想在客戶端對(duì)顯示的數(shù)據(jù)進(jìn)行過(guò)濾
6.4.2. 解決辦法
給ArrayCollection 的filterFunction 屬性賦值自定義函數(shù)引用以執(zhí)行過(guò)濾匹配。
6.4.3. 討論
為了掩飾客戶端過(guò)濾數(shù)據(jù)，下面的例子添加一個(gè)city 過(guò)濾功能。UI 新增一個(gè)TextInput 文本輸入框供用戶輸入city 名稱并過(guò)濾掉DataGrid 中匹配的相應(yīng)數(shù)據(jù)。當(dāng)用戶在cityFilter 文本框控件中輸入數(shù)據(jù)時(shí)，文本框會(huì)觸發(fā)change 事件，通過(guò)applyFilter 方法進(jìn)行處理。applyFilter方法賦值一個(gè)函數(shù)引用給homesForSale ArrayCollection 實(shí)例的filterFunction 屬性，并調(diào)用ArrayCollection 的refresh 方法。filterCities 方法對(duì)dataProvider 的city 屬性值和文本框輸入值進(jìn)行小寫(xiě)字符串匹配測(cè)試：

-XML

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical" creationComplete="initApp()">
<mx:HTTPService id="srv" url="assets/homesforsale.xml"
resultFormat="object" result="onResult(event)"/>
<mx:Form>
<mx:FormItem label="City">
<mx:TextInput id="cityFilter" change="applyFilter()"/>
</mx:FormItem>
</mx:Form>
<mx:AdvancedDataGrid id="grid" width="100%"
height="100%" sortExpertMode="true"
dataProvider="{homesForSale}">
<mx:columns>
<mx:AdvancedDataGridColumn headerText="Total No."
dataField="total"/>
<mx:AdvancedDataGridColumn headerText="City"
dataField="city"/>
<mx:AdvancedDataGridColumn headerText="State"
dataField="state"/>
<mx:AdvancedDataGridColumn headerText="Price Ranges
[<350K] [350K -600K] [>600K]" dataField="range"
itemRenderer="RangeRenderer" sortCompareFunction="sortRanges"/>
</mx:columns>
</mx:AdvancedDataGrid>
<mx:Script>
<![CDATA[
import mx.events.FlexEvent;
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;
[Bindable]
private var homesForSale:ArrayCollection;
private function initApp():void {
this.srv.send();
}
private function onResult(evt:ResultEvent):void {
this.homesForSale = evt.result.data.region;
}
private function sortRanges(obj1:Object,
obj2:Object):int{
var value1:Number = obj1.range.range1;
var value2:Number = obj2.range.range1;
if(value1 < value2) {
return -1;
}
else if(value1 > value2){
return 1;
}
else {
return 0;
}
}
private function applyFilter():void {
if(this.homesForSale.filterFunction == null) {
this.homesForSale.filterFunction =
this.filterCities;
}
this.homesForSale.refresh();
}
private function filterCities(item:Object):Boolean {
var match:Boolean = true;
if(cityFilter.text != "") {
var city:String = item["city"];
var filter:String = this.cityFilter.text;
if(!city ||
city.toLowerCase().indexOf(filter.toLowerCase()) < 0) {
match = false;
}
}
return match;
}

]]>
</mx:Script>
</mx:Application>