由於需要做一個樹形菜單的即時搜索功能，順便記下自己粗陋的實現方式
因爲需求說要保持之前樹的原狀，如之前的展開或者選中，所以用了兩個tree組件，一個是最初的，一個是用來顯示搜索的
效果圖如下：
代碼都有註釋，就不說什麼了。提一下flex中的字體 下面用了微軟雅黑，看看微軟雅黑的名稱fontFamily="Microsoft YaHei"
還有像宋體的名稱是“SimSun”
代碼如下：
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" initialize="application1_initializeHandler(event)">
<fx:Declarations>
<!-- 將非可視元素（例如服務、值對象）放在此處 -->
<fx:XML id="treeXml">
<root label="監控點">
<node id="1" label="軟件園一期" icon="iconNode_online" pid="0">
<node id="6" pid="1" label="望海路一" icon="iconNode_online" source="rtmp://42.121.0.108:9122/RpServer" videoName="S1304230092"/>
<node id="7" pid="1" label="觀日路一" icon="iconNode_online" source="rtmp://42.121.0.108:9122/RpServer" videoName="S1306250558"/>
<node id="12" pid="1" label="呂嶺路一" icon="iconNode_online" source="rtmp://42.121.0.108:9122/RpServer" videoName="S1304180144"/>
<node id="13" pid="1" label="呂嶺路一" icon="iconNode_online" source="rtmp://42.121.0.108:9122/RpServer" videoName="S1304180144"/>
<node id="14" pid="1" label="呂嶺路一" icon="iconNode_online" source="rtmp://42.121.0.108:9122/RpServer" videoName="S1304180144"/>
<node id="15" pid="1" label="呂嶺路一" icon="iconNode_online" source="rtmp://42.121.0.108:9122/RpServer" videoName="S1304180144"/>
</node>
<node id="2" label="軟件園二期" icon="iconNode_online" pid="0">
<node id="8" pid="2" label="望海路二" icon="iconNode_online" source="rtmp://42.121.0.108:9122/RpServer" videoName="S1309120044"/>
<node id="16" pid="2" label="呂嶺路二" icon="iconNode_online" source="rtmp://42.121.0.108:9122/RpServer" videoName="S1304180144"/>
<node id="17" pid="2" label="呂嶺路二" icon="iconNode_online" source="rtmp://42.121.0.108:9122/RpServer" videoName="S1304180144"/>
<node id="18" pid="2" label="呂嶺路二" icon="iconNode_online" source="rtmp://42.121.0.108:9122/RpServer" videoName="S1304180144"/>
</node>
<node id="3" label="軟件園三期" icon="iconNode_online" pid="0">
<node id="9" pid="3" label="望海路三" icon="iconNode_online" source="rtmp://42.121.0.108:9122/RpServer" videoName="S1306260224"/>
<node id="19" pid="3" label="望海路三" icon="iconNode_online" source="rtmp://42.121.0.108:9122/RpServer" videoName="S1306260224"/>
<node id="22" pid="3" label="望海路三" icon="iconNode_online" source="rtmp://42.121.0.108:9122/RpServer" videoName="S1306260224"/>
<node id="23" pid="3" label="望海路三" icon="iconNode_online" source="rtmp://42.121.0.108:9122/RpServer" videoName="S1306260224"/>
</node>
<node id="4" label="軟件園四期" icon="iconNode_online" pid="0">
<node id="10" pid="4" label="望海路四" icon="iconNode_online" source="rtmp://42.121.0.108:9122/RpServer" videoName="S1306260226"/>
<node id="32" pid="4" label="望海路四" icon="iconNode_online" source="rtmp://42.121.0.108:9122/RpServer" videoName="S1306260226"/>
<node id="34" pid="4" label="望海路四" icon="iconNode_online" source="rtmp://42.121.0.108:9122/RpServer" videoName="S1306260226"/>
</node>
<node id="5" label="軟件園五期" icon="iconNode_online" pid="0">
<node id="451" pid="5" label="望海路五" icon="iconNode_online" source="rtmp://42.121.0.108:9122/RpServer" videoName="S1306250557"/>
<node id="44" pid="5" label="望海路五" icon="iconNode_online" source="rtmp://42.121.0.108:9122/RpServer" videoName="S1306250557"/>
<node id="55" pid="5" label="望海路五" icon="iconNode_online" source="rtmp://42.121.0.108:9122/RpServer" videoName="S1306250557"/>
</node>
</root>
</fx:XML>
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import spark.events.TextOperationEvent;
[Bindable]
private var treeData:XML;
[Bindable]
private var searchTreeData:XML;
protected function application1_initializeHandler(event:FlexEvent):void
{
treeData = treeXml; //將XML數據賦給邦定的XML變量
}
//輸入框值改變處理涵數
protected function searchText_changeHandler(event:TextOperationEvent):void
{
if(searchText.text == null || searchText.text == ""){
searchContainer.visible = false;
return;
}
//搜索的值的XML數據
searchTreeData = new XML(<root label="監控點"> </root>);
searchContainer.visible = true;
//treeData..node查詢所有XML數據，這個是(@label.indexOf(searchText.text) != -1)：過濾
var xmlList:XMLList = treeData..node.(@label.indexOf(searchText.text) != -1);
if(xmlList.length() == 0){ //沒找到返回
newTree.visible = false;
labelText.visible = true;
return;
}
labelText.visible = false;
newTree.visible = true;
for each(var pXml:XML in xmlList){ //先找出父節點
if(pXml.@pid == "0"){
searchTreeData.appendChild(pXml); //加入到新的XML
}
}
//找出子節點
for each(var cXml:XML in xmlList){
if(cXml.@pid != "0"){ //父ID不爲0
//子節點父ID在新的XML數據中能否找到
var nodeXml:XML = searchTreeData.node.(@id == cXml.@pid)[0];
if(nodeXml != null){ //能找到直接追加
//判斷是否已存在
var nodeChild:XML = nodeXml.node.(@id == cXml.@id)[0];
if(nodeChild == null){
nodeXml.appendChild(cXml);
}
} else{ //找不到 則先找到該節點的父節點
var pcXml:XML = cXml.parent(); //父節點
//重新構造該XML數據，因爲後面要清除掉子節點，不然會刪掉原來的XML數據
var tempXMl:XML = new XML(pcXml.toString());
searchTreeData.appendChild(tempXMl); //追加
//清楚下面的子節點
delete searchTreeData.node.(@id == tempXMl.@id).node;
//定位到該節點
var xml:XML = searchTreeData.node.(@id == tempXMl.@id)[0];
xml.appendChild(cXml); //追加
}
}
}
//展開所有父節點
newTree.openItems = searchTreeData..node;
}
protected function button1_clickHandler(event:MouseEvent):void
{
// TODO Auto-generated method stub
searchText.text = "";
this.searchText_changeHandler(null);
}
]]>
</fx:Script>
<s:Panel horizontalCenter="0" title="樹查詢" width="300" height="100%">
<s:layout>
<s:VerticalLayout horizontalAlign="center" paddingTop="10"/>
</s:layout>
<s:HGroup>
<s:TextInput id="searchText" width="180" change="searchText_changeHandler(event)"/>
<s:Button label="清空" click="button1_clickHandler(event)"/>
</s:HGroup>
<s:Group height="100%">
<mx:Tree id="oldTree" width="238" height="100%" fontFamily="Microsoft YaHei"
dataProvider="{treeData}" showRoot="false" labelField="@label"/>
<s:BorderContainer height="100%" width="238" id="searchContainer" horizontalCenter="0" borderVisible="false" backgroundColor="0x666666" visible="false">
<mx:Tree id="newTree" width="238" height="100%" contentBackgroundAlpha="0.0" fontFamily="Microsoft YaHei"
dataProvider="{searchTreeData}" showRoot="false" labelField="@label" visible="false"/>
<s:Label id="labelText" horizontalCenter="0" y="20" text="暫無搜索結果" fontSize="16" visible="false"
fontFamily="Microsoft YaHei" color="0xffffff"/>
</s:BorderContainer>
</s:Group>
</s:Panel>
</s:Application>
