由于需要做一个树形菜单的即时搜索功能，顺便记下自己粗陋的实现方式
因为需求说要保持之前树的原状，如之前的展开或者选中，所以用了两个tree组件，一个是最初的，一个是用来显示搜索的
效果图如下：
代码都有注释，就不说什么了。提一下flex中的字体 下面用了微软雅黑，看看微软雅黑的名称fontFamily="Microsoft YaHei"
代码如下：
<?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>
