FLEX 树形菜单例子之即时搜索（四）

最新推荐文章于 2015-03-11 16:02:24 发布
最新推荐文章于 2015-03-11 16:02:24 发布
阅读量1.9k 收藏
点赞数
分类专栏： Flex/As 文章标签： flex4 tree 搜索
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/songanling/article/details/24415389
版权

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

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


布丰
关注
专栏目录
用HTML+CSS做一个漂亮简单的花店网页【免费的学生网页设计成品】
html精品源码
08-09 6629
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；...
flex 4.6 树形多选+动态菜单
07-01
包含2个demo 一个是树形多选框，可选中多个选项，并同时显示选中项的内容；一个是动态可伸缩的菜单，点击后弹出菜单，菜单失去焦点后收缩。
flex 树结构的列表
02-05
flex制作的树结构的datagrid列表，效果全，下载即可运行
FLEX 树形菜单例子（三）
布丰的专栏
03-25 2016
针对树形菜单的相关操作，实现的大致功能如下： 1.展开所有节点 2.关闭所有节点 3.选中某个节点并展开父节点 4.添加节点 5.修改节点 6.删除节点 7.修改节点图标 7.模糊查询节点 8.同级之间的节点拖拽 效果图： 代码： <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmln
FLEX 树形菜单例子（二）
布丰的专栏
03-10 1759
这个例子是用来选中子节点的同时展开父节点 <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">
flex下的树形下拉框treecombobox
董浩的专栏
10-14 4748
不多说了，组件代码如下："1.0" encoding="utf-8"?>"http://www.adobe.com/2006/mxml" creationComplete="initComponent()">               import mx.events.FlexEvent;            [Bindable]            private var _label:S
flex quick starts
02-20
- **Tree**: 显示层次结构数据的树形列表。 #### 四、数据提供者(Data Provider) 在Flex中，数据提供者是一个存储数据的对象集合，它是列表组件与实际数据之间的桥梁。数据提供者使得开发者能够轻松地更新数据，并...
flex拖动树形
09-07
flex 可拖动的树形自定义控件，从左选项框拖动到右选项框
Flex 树形结构
01-01
一个Flex语言写的树形结构代码，小主一直用的，暂未发现BUG，请多多指教！
Flex写的带复选框树状多选组件
07-26
NULL 博文链接：https://thesp2.iteye.com/blog/652252
Flex做的树形产品目录示例
07-14
用FLEX开发的产品目录树，产品展示示例，数据源通过Asp.net WebService 提供。
Flex Tree快速定位树结点
11-20
快速定位输入结点名称，点击“检索”后打开树中对应结点
Flex 树形控件（Tree ）的使用
前端开发、简约至上！ - Html，Css，Js，Jquery ...
12-13 348
一、树形控件的常用属性       1、dragMoveEnabled：是否在拖放的过程中将节点移动，而不是复制。       2、folderOpenIcon：展开节点时的节点图标       3、folderClosedIcon：关闭节点时的节点图标       4、defaultLeafIcon：叶子节点的图标       5、openItems：在初始化时展开的节点集。...
FLEX3 树形图结构
bark_ice的专栏
03-11 466
用FLEX3从数据库接受数据形成树形图步骤： 1.封装一个名为Node的as类，包括编号，名称，子节点和一个构造方法。 package common{     import mx.collections.ArrayCollection;         public class Node{                public var id:int;             
Flex Tree自动定位节点
lvdou2518的专栏
08-08 1214
xmlns:s="library://ns.adobe.com/flex/spark"           xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%">
flex datagrid 复杂表格 树型表格 flex 教程 flex培训 flex源码 flex实例
叮当小马的专栏
09-10 2936
复杂的flex datagrid  ，在datagrid 中添加树 <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/fle
flex和java交互实现实现无限接树形结构
p_x1984的专栏
07-30 173
数据库表（Category）的设计为： id       parentId     type       name       description13         null       search    最新舆情      描述1          13         search    区域          描述4          13         search    机构...
flex树结构－－实现树型结构的拖拽
冰树之家
02-10 1763
转载请注明来源: 冰树之家 http://blog.csdn.net/zzr173function doDragEnter(event):Void {  dragInProgress = true;        //自动滚动    event.handled  = "true";}function doDragExit(event):Void {    event.target.hide
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值