6.10.在DataGrid中搜索并自動(dòng)滾屏到匹配項(xiàng)

2024-04-27 13:51:59

字體：大中小

供稿：網(wǎng)友

6.10.1. 問題
我想搜索DataGrid 中的數(shù)據(jù)項(xiàng)并滾屏到匹配項(xiàng)
6.10.2. 解決辦法
在ArrayCollection 中使用IViewCursor 的findFirst 方法。使用DataGrid 的scrollToIndex 進(jìn)行滾屏。
6.10.3. 討論
這項(xiàng)技術(shù)的關(guān)鍵之處在于DataGrid 和一個(gè)簡單的表達(dá)，提供用戶在文本框中輸入city 名稱，然后點(diǎn)擊按鈕開始搜索。當(dāng)用戶點(diǎn)擊按鈕(search_btn)后，DataGrid 的dataProvider 被搜索，相應(yīng)的行被選擇，如果所在行沒顯示的話滾屏到所在視圖。

該解決方案的兩個(gè)主要方面是查找匹配項(xiàng)和定位DataGrid 的相應(yīng)項(xiàng)。查找匹配項(xiàng)，可使用IViewCursor，它是一個(gè)接口，規(guī)定一些屬性和方法用于遍歷集合。所有的Flex 集合對(duì)象都支持createCursor 方法返回一個(gè)IViewCursor 類實(shí)例。這個(gè)例子中，下面的幾行代碼創(chuàng)建一個(gè)ArrayCollection 游標(biāo)實(shí)例，作為DataGrid 的dataProvider：

-ActionScript

private function onResult(evt:ResultEvent):void {
var sort:Sort = new Sort();
sort.fields = [ new SortField("city",true) ];
this.homesForSale = evt.result.data.region;
this.homesForSale.sort = sort;
this.homesForSale.refresh();
this.cursor = this.homesForSale.createCursor();
}

注意你可以賦值Sort 對(duì)象給定義了ArrayCollection，dataProvider 數(shù)據(jù)項(xiàng)city 屬性作為可排序字段。這是因?yàn)镮ViewCursor 的findFirst 和其他查找方法只可以被可排序視圖所調(diào)用。

當(dāng)游標(biāo)被創(chuàng)建后，它可以導(dǎo)航和查詢相關(guān)聯(lián)的視圖，當(dāng)用戶點(diǎn)擊Search City 按鈕時(shí)下面的searchCity 方法便被調(diào)用：

-ActionScript

private function searchCity():void {
if(search_ti.text != "") {
if(this.cursor.findFirst({city:search_ti.text})){
var idx:int =
this.homesForSale.getItemIndex(this.cursor.current);
this.grid.scrollToIndex(idx);
this.grid.selectedItem = this.cursor.current;
}
}
}

這個(gè)方法中，用戶輸入的city 名稱作為IViewCursor 的findFirst 方法的搜索參數(shù)。當(dāng)找到ArrayCollection 中的匹配項(xiàng)時(shí)該方法返回true 并更新游標(biāo)對(duì)象的current 屬性，指向匹配項(xiàng)。

當(dāng)匹配項(xiàng)被找到后，ArrayCollection 的getItemIndex 方法指出匹配項(xiàng)的具體位置，最后DataGrid 使用scrollToIndex 方法滾屏到匹配位置，selectedItem 屬性被設(shè)置為匹配項(xiàng)。

完整的代碼如下：

-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="Search">
<mx:TextInput id="search_ti"/>
</mx:FormItem>
<mx:FormItem>
<mx:Button label="Search City" click="searchCity()"/>
</mx:FormItem>
</mx:Form>
<mx:DataGrid id="grid" width="300" height="150"
editable="true" dataProvider="{homesForSale}">
<mx:columns>
<mx:DataGridColumn headerText="Total No."
dataField="total"/>
<mx:DataGridColumn headerText="City"="false"
dataField="city"/>
<mx:DataGridColumn headerText="State"
dataField="state"/>
</mx:columns>
</mx:DataGrid>
<mx:Script>
<![CDATA[
import mx.collections.SortField;
import mx.collections.Sort;
import mx.collections.IViewCursor;
import mx.events.FlexEvent;
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;
[Bindable]
private var homesForSale:ArrayCollection;
private var cursor:IViewCursor;
private function initApp():void {
this.srv.send();
}
private function onResult(evt:ResultEvent):void {
var sort:Sort = new Sort();
sort.fields = [ new SortField("city",true) ];
this.homesForSale = evt.result.data.region;
this.homesForSale.sort = sort;
this.homesForSale.refresh();
this.cursor = this.homesForSale.createCursor();
}
private function searchCity():void {
if(search_ti.text != "") {
if(this.cursor.findFirst({city:search_ti.text})){
var idx:int =
this.homesForSale.getItemIndex(this.cursor.current);
this.grid.scrollToIndex(idx);
this.grid.selectedItem = this.cursor.current;
}
}
}

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