6.10.在DataGrid中搜索并自動滾屏到匹配項

2024-04-27 13:51:59

字體：大中小

供稿：網(wǎng)友

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

該解決方案的兩個主要方面是查找匹配項和定位DataGrid 的相應項。查找匹配項，可使用IViewCursor，它是一個接口，規(guī)定一些屬性和方法用于遍歷集合。所有的Flex 集合對象都支持createCursor 方法返回一個IViewCursor 類實例。這個例子中，下面的幾行代碼創(chuàng)建一個ArrayCollection 游標實例，作為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 對象給定義了ArrayCollection，dataProvider 數(shù)據(jù)項city 屬性作為可排序字段。這是因為IViewCursor 的findFirst 和其他查找方法只可以被可排序視圖所調(diào)用。

當游標被創(chuàng)建后，它可以導航和查詢相關(guān)聯(lián)的視圖，當用戶點擊Search City 按鈕時下面的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;
}
}
}

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

當匹配項被找到后，ArrayCollection 的getItemIndex 方法指出匹配項的具體位置，最后DataGrid 使用scrollToIndex 方法滾屏到匹配位置，selectedItem 屬性被設置為匹配項。

完整的代碼如下：

-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>