Tree实例

最新推荐文章于 2022-11-20 22:59:45 发布
最新推荐文章于 2022-11-20 22:59:45 发布
阅读量113 收藏
点赞数
分类专栏： flex 文章标签： Flex XML ActionScript 

<?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="600"
			   minHeight="300">
	<mx:Tree labelField="@label"
			 top="10"
			 bottom="10"
			 left="10"
			 right="10">
		<fx:XMLList>
			<node label="部门">
				<node label="人事部">
					<node label="张三"/>
				</node>
				<node label="技术部">
					<node label="李四"/>
					<node label="王五"/>
				</node>
				<node label="市场部"
					  isBranch="true"/>
			</node>
		</fx:XMLList>
	</mx:Tree>
</s:Application>



<?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="600"
			   minHeight="300">
	<mx:Tree labelField="label"
			 top="10"
			 bottom="10"
			 left="10"
			 right="10">
		<s:ArrayCollection>
			<fx:Object label="部门">
				<fx:children>
					<fx:Object label="人事部">
						<fx:children>
							<fx:Object label="张三"/>
						</fx:children>
					</fx:Object>
					<fx:Object label="技术部">
						<fx:children>
							<fx:Object label="李四"/>
							<fx:Object label="王五"/>
						</fx:children>
					</fx:Object>
					<fx:Object label="市场部"
							   children="{[]}"/>
				</fx:children>
			</fx:Object>
		</s:ArrayCollection>
	</mx:Tree>
</s:Application>



<?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="600"
			   minHeight="300"
			   creationComplete="creationCompleteHandler(event)">
	<fx:Declarations>
		<fx:XML id="treeData">
			<node label="部门">
				<node label="人事部">
					<node label="张三"/>
				</node>
				<node label="技术部">
					<node label="李四"/>
					<node label="王五"/>
				</node>
				<node label="市场部"
					  isBranch="true"/>
			</node>
		</fx:XML>
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.controls.Tree;
			import mx.events.FlexEvent;

			protected function creationCompleteHandler(event:FlexEvent):void
			{
				var tree:Tree=new Tree();
				tree.labelField="@label";
				tree.percentWidth=100;
				tree.percentHeight=100;
				tree.setStyle("borderVisible", false);
				tree.dataProvider=treeData;
				addElement(tree);
			}
		]]>
	</fx:Script>
</s:Application>



<?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="600"
			   minHeight="300">
	<fx:Declarations>
		<fx:XMLList id="treeData">
			<node label="部门">
				<node label="人事部">
					<node label="张三"/>
				</node>
				<node label="技术部">
					<node label="李四"/>
					<node label="王五"/>
				</node>
				<node label="市场部"
					  isBranch="true"/>
			</node>
		</fx:XMLList>
	</fx:Declarations>
	<mx:Tree labelField="@label"
			 dataProvider="{treeData}"
			 defaultLeafIcon="@Embed(source='assets/leaf.gif')"
			 folderClosedIcon="@Embed(source='assets/closed.gif')"
			 folderOpenIcon="@Embed(source='assets/open.gif')"
			 top="10"
			 bottom="10"
			 left="10"
			 right="10">
	</mx:Tree>
</s:Application>



<?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="600"
			   minHeight="300">
	<fx:Script>
		<![CDATA[
			private function expandTree(isExpand:Boolean):void
			{
				tree.validateNow();
				tree.expandChildrenOf(treeData, isExpand);
			}
		]]>
	</fx:Script>
	<fx:Declarations>
		<fx:XML id="treeData">
			<node label="部门">
				<node label="人事部">
					<node label="张三"/>
				</node>
				<node label="技术部">
					<node label="李四"/>
					<node label="王五"/>
				</node>
				<node label="市场部"
					  isBranch="true"/>
			</node>
		</fx:XML>
	</fx:Declarations>
	<mx:Tree id="tree"
			 dataProvider="{treeData}"
			 labelField="@label"
			 top="40"
			 bottom="10"
			 left="10"
			 right="10">
	</mx:Tree>
	<s:Button id="expandBtn"
			  x="10"
			  y="10"
			  label="全部展开"
			  click="expandTree(true)"/>
	<s:Button id="collapseBtn"
			  x="90"
			  y="10"
			  label="全部收起"
			  click="expandTree(false)"/>
</s:Application>



<?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="600"
			   minHeight="300">
	<fx:Script>
		<![CDATA[
			private function expandTree(isExpand:Boolean):void
			{
				tree.validateNow();
				tree.expandChildrenOf(treeData.getItemAt(0), isExpand);
			}
		]]>
	</fx:Script>
	<fx:Declarations>
		<s:ArrayCollection id="treeData">
			<fx:Object label="部门">
				<fx:children>
					<fx:Object label="人事部">
						<fx:children>
							<fx:Object label="张三"/>
						</fx:children>
					</fx:Object>
					<fx:Object label="技术部">
						<fx:children>
							<fx:Object label="李四"/>
							<fx:Object label="王五"/>
						</fx:children>
					</fx:Object>
					<fx:Object label="市场部"/>
				</fx:children>
			</fx:Object>
		</s:ArrayCollection>
	</fx:Declarations>
	<mx:Tree id="tree"
			 dataProvider="{treeData}"
			 labelField="label"
			 top="40"
			 bottom="10"
			 left="10"
			 right="10">
	</mx:Tree>
	<s:Button id="expandBtn"
			  x="10"
			  y="10"
			  label="全部展开"
			  click="expandTree(true)"/>
	<s:Button id="collapseBtn"
			  x="90"
			  y="10"
			  label="全部收起"
			  click="expandTree(false)"/>
</s:Application>



<?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="600"
			   minHeight="300">
	<fx:Declarations>
		<fx:XMLList id="treeData">
			<node id="00"
				  pid="root"
				  label="部门"
				  isBranch="true"/>
			<node id="0001"
				  pid="00"
				  label="人事部"
				  isBranch="true"/>
			<node id="000101"
				  pid="0001"
				  label="张三"/>
			<node id="0002"
				  pid="00"
				  label="技术部"
				  isBranch="true"/>
			<node id="000201"
				  pid="0002"
				  label="李四"/>
			<node id="000202"
				  pid="0002"
				  label="王五"/>
			<node id="0003"
				  pid="00"
				  label="市场部"/>
		</fx:XMLList>
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.events.TreeEvent;

			protected function getChildren(id:String):XMLList
			{
				return treeData.(@pid == id);
			}

			protected function asyncTree_itemOpeningHandler(event:TreeEvent):void
			{
				if (event.opening && ((event.item as XML).children().length() == 0))
				{
					var children:XMLList=getChildren(event.item.@id);
					event.item.appendChild(children);
				}
			}
		]]>
	</fx:Script>
	<mx:Tree id="asyncTree"
			 labelField="@label"
			 dataProvider="{getChildren('root')}"
			 itemOpening="asyncTree_itemOpeningHandler(event)"
			 top="10"
			 bottom="10"
			 left="10"
			 right="10">
	</mx:Tree>
</s:Application>



<?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="600"
			   minHeight="300">
	<fx:Declarations>
		<fx:Array id="treeData">
			<fx:Object uid="00"
					   pid="root"
					   label="部门"
					   children="{[]}">
			</fx:Object>
			<fx:Object uid="0001"
					   pid="00"
					   label="人事部"
					   children="{[]}"/>
			<fx:Object uid="000101"
					   pid="0001"
					   label="张三"/>
			<fx:Object uid="0002"
					   pid="00"
					   label="技术部"
					   children="{[]}"/>
			<fx:Object uid="000201"
					   pid="0002"
					   label="李四"/>
			<fx:Object uid="000202"
					   pid="0002"
					   label="王五"/>
			<fx:Object uid="0003"
					   pid="00"
					   label="市场部"/>
		</fx:Array>
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.events.TreeEvent;

			protected function getChildren(uid:String):Array
			{
				return treeData.filter(function(item:*, index:int, arr:Array):Boolean
				{
					return (item.pid == uid) ? true : false;
				});
			}

			protected function asyncTree_itemOpeningHandler(event:TreeEvent):void
			{
				if (event.opening && (event.item.children.length == 0))
				{
					var children:Array=getChildren(event.item.uid);
					event.item.children=children;
				}
			}
		]]>
	</fx:Script>
	<mx:Tree id="asyncTree"
			 labelField="label"
			 dataProvider="{getChildren('root')}"
			 itemOpening="asyncTree_itemOpeningHandler(event)"
			 top="10"
			 bottom="10"
			 left="10"
			 right="10">
	</mx:Tree>
</s:Application>



<?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="600"
			   minHeight="300">
	<fx:Script>
		<![CDATA[
			private function addNode():void
			{
				(tree.selectedItem as XML).appendChild(<node label="新节点"/>);
			}
			private function deleteNode():void
			{
				tree.dataDescriptor.removeChildAt(tree.selectedItem.parent(), tree.selectedItem, tree.selectedItem.childIndex(), tree.dataProvider);
			}
		]]>
	</fx:Script>
	<fx:Declarations>
		<fx:XML id="treeData">
			<node label="部门">
				<node label="人事部">
					<node label="张三"/>
				</node>
				<node label="技术部">
					<node label="李四"/>
					<node label="王五"/>
				</node>
				<node label="市场部"
					  isBranch="true"/>
			</node>
		</fx:XML>
	</fx:Declarations>
	<mx:Tree id="tree"
			 dataProvider="{treeData}"
			 labelField="@label"
			 showRoot="false"
			 top="40"
			 bottom="10"
			 left="10"
			 right="10">
	</mx:Tree>
	<s:Button id="addBtn"
			  x="10"
			  y="10"
			  label="添加节点"
			  click="addNode()"/>
	<s:Button id="deleteBtn"
			  x="90"
			  y="10"
			  label="删除节点"
			  click="deleteNode()"/>
</s:Application>
ianysoft
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
二叉树实例
ay_一起沉默 的博客
08-27 4300
二叉树： 二叉树性质： 1.第i层的节点总数最多有2i-1个结点 2.深度额我k的二叉树最多有2k-1个结点，最少有k个结点 3.二叉树，如果其叶结点为n0，而度为2的结点总数为n2，则n0=n2+1 4.有n个结点的完全二叉树的深度k为：k=[log2n]+1 5.有n个结点的完全二叉树各结点如果用顺序表存储，对任意结点i，有如下关系： 如果
树的应用举例
bufengzj的博客
01-25 389
二叉树 ''' ''' #先序遍历 【这里指根在先】 from collections import deque class BitTree(): def __init__(self): self.root=None def insert(self,node,pos): pass @staticmethod def pre_order(BitTreeNode): if BitTreeNode:
操作树形数据方法封装：获取树形数据的某个值、给树形数据每层添加属性
二三的博客
11-20 1507
对于常规数组来说，我们想要获取某一个值，或者给每层添加属性，只需要使用fileter、map等等的方法，相对来说比较简单。树形数据不同于常规的数组数据，不能确定其内部包含多少个子节点，即children。所以我们在操作树形数据的时候，不同于常规数据。其实操作树形数据也很简单，其核心就是递归。
treeSelect树组件设置父节点禁用
二三的博客
11-20 1万+
项目开发中需求方提了这样一个需求：下拉框数据是树形结构，但父节点禁止点选，只能点击子节点。毫无疑问，选用的是组件库的treeSelect组件。但该组件默认每一级节点都可以进行选择，不符合需求。于是开始看API，发现treeDatadisabled，可以控制节点是否禁用。属性即可。
zTree树形菜单使用实例
学亮编程手记
12-24 3171
在每个节点添加 id 和 pid， id 表示当前节点编号，pid 表示父节点编号第一步：在页面显示菜单位置，添加 ul设置 class=”ztree”第二步：开启简单数据格式支持第三步：编写树形菜单数据第四步：生成树形菜单<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ztree树形菜单的
jstree的简单使用例子
热门推荐
十年树木的博客
04-22 4万+
jstree
js Tree 简单使用例子
sx1025的博客
08-14 3343
jsTree弹出树
jqgrid的tree实例
07-26
"jqgrid的tree实例"是学习如何在jqGrid中实现树状结构数据展示的一个实践案例。 在jqGrid中，树形视图允许数据以层次结构的形式呈现，这对于处理具有层级关系的数据非常有用，比如部门结构、文件系统或者组织架构等...
jsTree实例，jsTree实例
09-06
**jsTree 实例详解** jsTree 是一个流行的 JavaScript 库，专门用于创建、操作和展示交互式的树型结构。在 Web 开发中，它常被用于构建目录结构、组织数据或者构建导航菜单。jsTree 提供了丰富的 API 和多种主题，...
JsTree 实例使用
09-27
**JsTree 实例使用详解** JsTree 是一个强大的JavaScript库，专为构建交互式的树状视图而设计。它在Web开发中广泛应用于文件管理、菜单系统、组织结构展示等多种场景。JsTree 提供了丰富的功能，如动态加载、节点...
JsTree示例
03-17
NULL 博文链接：https://xuan198451.iteye.com/blog/557376
一个简单的ztree小例子
06-03
一个简单的ztree小例子 代码简洁 适合初学者
Ztree完整实例
01-18
ztree,ztree教程,ztree实例,ztree源码，完整实例附带jar包
Extjs tree实例【源代码】
08-08
ExtJs 2.2.1 tree实例,内附mysql数据文件 1. 数据节点一次性加载 2. 节点分为两个类（项目和设备） 3. 右键菜单 4. 节点增、删、改操作 ....... 后台是java struts1。 本例旨在说明extjs的tree操作，后台操作很简陋...
jstree的简单实例
11-26
在示例中，首先我们看到一个简单的 JSTree 实例创建。这涉及到以下核心配置： 1. **初始化 JSTree**： ```javascript $("#treeview1").jstree({ 'core': { 'multiple': false, // 不允许多选 'data': ay_mssys...
Z-tree实例——复选框
mourJava的博客
07-07 2303
官网实例，个人研究测试，以备用。 1、页面布局： Html代码   BODY>   div class="content_wrap">       div class="zTreeDemoBackground left">           ul id="treeDemo" class="ztree">ul>       div>       p>父子关联
zTree的简单实例
公子七
06-28 9155
zTree的简单实例 　　zTree 是一个依靠jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。 　　zTree官网 　　zTreeAPI下载链接 　　页面主要引入一下几个文件： link type="text/css" rel="stylesheet" href="zTree/zTreeStyle.css" /> script
zTree学习小例子
qq_21875331的博客
03-19 1230
项目结构效果展示：一、数据库设计CREATE TABLE `menu` (  `id` INT(11) NOT NULL AUTO_INCREMENT,  `pid` INT(11) DEFAULT NULL,  `title` VARCHAR(50) NOT NULL,  `url` VARCHAR(50) DEFAULT NULL,  PRIMARY KEY (`id`)) ENGINE=IN...
layui tree 单选实例
最新发布
05-13
以下是一个基于 layui 的树形结构单选实例： HTML 代码： ``` 选择菜单 <div id="menuTree"></div> ``` JavaScript 代码： ``` layui.use(['tree', 'form'], function(){ var tree = layui.tree, ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值