[Flex]如何在tree中使用搜尋功能

Flex裡內建的元件非常豐富，都是能幫助我們能夠快速開發的好幫手， 今天要介紹一下tree此元件，有使用過的人都曉得，若目前要開發的功能 需要主副階層的呈現方式，那麼List可能就不符合我們所想要的囉!此時 tree就派上用場了，本文要介紹就是當tree的類別累積未來越多時，如何 透過搜尋的欄位，快速找尋到我們所要的項目。


這次tree的資料格式是使用XMLList，也是使用XML標籤來定義，如下圖
而tree則是由dataProviderx來接收XML的資料，如dataProvider="{data}"； 要在tree中顯示文字的話，則要定義需擷取的標籤內容是什麼，如 labelField="@name"，表示會抓取node裡name裡頭的文字內容顯示在tree上。


簡單介紹程式碼會使用到的flex內建的函式
1.expandChildrenOf(item:Object, open:Boolean):void
功能:主要使用在要將tree中的item全部打開或全部收合。
2.expandItem(item:Object, open:Boolean, animate:Boolean = false, dispatchEvent:Boolean = false, cause:Event = null):void
功能:主要使用在要打開或關閉tree中特定的節點項目。

import mx.controls.Alert;
import mx.collections.XMLListCollection;
  
[Bindable]
private var searchResult:XMLList;
private var searchResultIndex:uint = 0;
    
//找尋符合字串的節點
private function findByName(event:MouseEvent):void
{
    // 擷取搜尋的字串:
    var searchStr:String = searchNameInput.text;
    if (searchStr.length == 0) {             
        Alert.show("請輸入搜尋的字串!");
        return;
    }
       
    // 將擴張的tree摺疊起來:
    tree.expandChildrenOf(data[0], false);
       
    // 搜尋符合的 XML nodes:
    searchResult = data.node.node.(@name.toLowerCase().search(searchStr.toLowerCase()) > -1);
    searchResultIndex = 0;
    findNextBut.enabled = true;
    
   // 展開 tree:
   if (searchResult[searchResultIndex] != undefined)
       expandNode(searchResult[searchResultIndex]);
}
   
//秀出其他發現的節點
private function findNext(event:MouseEvent):void
{
   // 將擴張的tree摺疊起來:
   tree.expandChildrenOf(data[searchResultIndex], false);
   // search forward:
   searchResultIndex += 1;
       
   if (searchResult[searchResultIndex] != undefined)
       expandNode(searchResult[searchResultIndex]);
}
    
//展開tree的分支
private function expandNode(xmlNode:XML):void
{
  while (xmlNode.parent() != null) {
     xmlNode = xmlNode.parent();
     tree.expandItem(xmlNode, true, false);
     tree.selectedItem = searchResult[searchResultIndex];
  }
}