FLEX 树形菜单例子之即时搜索(四)

由于需要做一个树形菜单的即时搜索功能,顺便记下自己粗陋的实现方式

因为需求说要保持之前树的原状,如之前的展开或者选中,所以用了两个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>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值