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

最新推荐文章于 2022-11-21 19:32:50 发布
最新推荐文章于 2022-11-21 19:32:50 发布
阅读量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>


布丰
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flex写的带复选框树状多选组件
07-26
NULL 博文链接：https://thesp2.iteye.com/blog/652252
Flex Tree快速定位树结点
11-20
快速定位输入结点名称，点击“检索”后打开树中对应结点
flex布局中search表单和text表单区别注意事项
qq_39099425的博客
11-21 253
原因就是search是html5新增加的表单，是border-box类型的盒子，而text表单是content-box类型，所以会在flex:1的基础上继续撑大盒子，解决方法可以为text表单添加box-sizing属性。但是如果用text文本框，就变成了这样。在flex布局中，搜索框正常是这样的。
FLEX 树形菜单例子（三）
布丰的专栏
03-25 1987
针对树形菜单的相关操作，实现的大致功能如下： 1.展开所有节点 2.关闭所有节点 3.选中某个节点并展开父节点 4.添加节点 5.修改节点 6.删除节点 7.修改节点图标 7.模糊查询节点 8.同级之间的节点拖拽 效果图： 代码： <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmln
FLEX 树形菜单例子（一）
布丰的专栏
03-06 2557
直接在代码中构造树形的xml数据 <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" minHei
CSS TreeMenu 二级树形菜单示例
09-05
CSS TreeMenu 是一种用于创建二级树形菜单的样式表技术，它主要用于构建网站的导航结构，尤其是适合在网站的侧边栏中展示。这个二级树形菜单设计得既美观又实用，可以有效地组织和呈现多级菜单内容，帮助用户快速...
flex 4.6 树形多选+动态菜单
07-01
包含2个demo 一个是树形多选框，可选中多个选项，并同时显示选中项的内容；一个是动态可伸缩的菜单，点击后弹出菜单，菜单失去焦点后收缩。
Flex 树形结构
01-01
总结来说，`Flex 树形结构`是一个用Flex实现的可选择的树形组件，它结合了`CheckTree`和`CheckTreeRenderer`来提供带复选框的树节点交互。这个组件适用于需要用户在层次化数据中进行选择的场景，如文件系统浏览、...
flex拖动树形
09-07
在“拖动下拉树形”这个特定场景中，可能还涉及到下拉功能，即树形控件的部分或全部内容可以隐藏在下拉菜单中，只有当用户点击或展开时才显示。这种设计可以节省屏幕空间，提高用户体验。实现这一功能，可以使用Flex...
Flex右键菜单例子
06-06
"Flex右键菜单例子"是一个专门针对Flex技术的右键菜单自定义解决方案。Flex是一种用于构建富互联网应用程序(RIA)的开放源代码框架，由Adobe公司开发。它基于ActionScript编程语言和MXML标记语言，主要用于创建交互式...
flex 树结构的列表
02-05
flex制作的树结构的datagrid列表，效果全，下载即可运行
[Flex] 组件Tree系列 —— 实现右键拓展功能
weixin_30649641的博客
03-02 81
主程序mxml： 1 <?xml version="1.0" encoding="utf-8"?> 2 3 <!--功能描述：结合tree拓展右键功能 必须在index.template.html设置params.wmode = "opaque"以屏蔽flash右键;--> 4 5 <s:Application xmlns:f...
Flex Tree节点的添加、删除
javatome
12-07 73
&lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:flexlib="http://code.google.com/p/flexlib/" width="100%" height="100%" &
一个用flex写的JAVA搜索引擎
busuo的专栏
11-17 451
下面是一个用Flex/Flash完成的Java文档，Java和源代码的搜索引擎。耐心等待它完成下载，你会体会到一种你没有经历过的体验。
flex和java交互实现实现无限接树形结构
p_x1984的专栏
07-30 154
数据库表（Category）的设计为： id       parentId     type       name       description13         null       search    最新舆情      描述1          13         search    区域          描述4          13         search    机构...
Flex SearchInput扩展
攒代码，不如烂博客
12-20 150
[b]SearchInput扩展TextInput 增加: imageSource属性（右侧图片）; tipText属性（为空时出现的提示文字）; buttonClick事件(点击button及input中敲击回车触发)。[/b] 多说无益，上代码 [code="java"] package { import flash.events.Event; i...
Android 和IOS 混合开发,一套代码两处运行-----Flutter
热门推荐
wolfking0608的博客
05-18 2万+
转载自:https://www.jianshu.com/p/8baa8ed2414d什么是Flutter2018年2月27日，在2018世界移动大会上，Google发布了Flutter的第一个Beta版本。Flutter是Google用以帮助开发者在Ios和Android两个平台开发高质量原生应用的全新移动UI框架，点击查看Flutter介绍视频。其实我第一次听说Flutter是在收到谷歌开发者公...
flex tree grid 综合页面
xubaoyong的专栏
07-31 93
[quote] Panel{ fontSize:12pt; } Tree{ fontSize:12pt; } 郭靖 升职报告 2007-07-07 Business 洪七公 退休报告 2007-07-17 Business 黄容 叫花鸡的烹饪过程 ...
uniapp树形菜单
最新发布
08-31
以下是一个示例，展示了如何在uniapp中创建一个简单的树形菜单： 首先，你需要在data中定义一个数组list，用于存储菜单的数据。每个菜单项都包括一个唯一的id和一个title属性，以及一个fold属性来表示菜单项的展开/...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值