ianysoft
- 浏览: 79339 次
- 性别:
- 来自: 北京
-
最新评论
<?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>
分享到：
发表评论
-
安装flashplayer老版本
2012-04-27 16:14 962[HKEY_LOCAL_MACHINE\SOFTWARE\Ma ... -
FLEX初始化事件执行顺序
2011-05-23 10:52 2309<?xml version="1.0&qu ... -
事件优先级总结
2010-08-06 09:22 1036package event { import fla ... -
ResourceBundle问题
2010-08-05 08:14 825◆◆ResourceBundle问题 ◇问题描述： 资源绑 ... -
Module实例
2010-06-12 06:55 1071<mx:ModuleLoader width=&qu ... -
ExternalInterface实例
2010-05-15 20:29 1525ExternalInterface.call(" ... -
ComboBox实例
2010-05-12 16:19 1491<s:ComboBox> <s:da ... -
Accordion实例
2010-05-12 15:39 823<mx:Accordion width=" ... -
ArrayCollection实例
2010-05-12 15:23 877<s:ArrayCollection> & ...
相关推荐
ExtJs 2.2.1 tree实例,内附mysql数据文件 1. 数据节点一次性加载 2. 节点分为两个类（项目和设备） 3. 右键菜单 4. 节点增、删、改操作 ....... 后台是java struts1。 本例旨在说明extjs的tree操作，后台操作很简陋...
**jsTree 实例详解** jsTree 是一个流行的 JavaScript 库，专门用于创建、操作和展示交互式的树型结构。在 Web 开发中，它常被用于构建目录结构、组织数据或者构建导航菜单。jsTree 提供了丰富的 API 和多种主题，...
**JsTree 实例使用详解** JsTree 是一个强大的JavaScript库，专为构建交互式的树状视图而设计。它在Web开发中广泛应用于文件管理、菜单系统、组织结构展示等多种场景。JsTree 提供了丰富的功能，如动态加载、节点...
**基于Jquery的JSTree实例** JSTree是一款强大的基于JavaScript的树型视图库，它能够方便地在网页中构建和操作交互式的树结构。JSTree与jQuery库结合，提供了丰富的API和多种可配置选项，使得开发者能够轻松实现...
"jqgrid的tree实例"是学习如何在jqGrid中实现树状结构数据展示的一个实践案例。 在jqGrid中，树形视图允许数据以层次结构的形式呈现，这对于处理具有层级关系的数据非常有用，比如部门结构、文件系统或者组织架构等...
在本文中，我们将深入探讨如何使用EasyUI框架与ASP.NET技术来实现数据网格（datagrid）与数据库的交互，以及如何构建动态的树形结构（tree）来加载数据库数据。EasyUI是一个基于jQuery的轻量级前端框架，它提供了一...
在IT领域，`GridTree` 是一种特殊的数据结构和算法的结合体，它通常用于数据组织和检索，尤其是在大规模多维数据集的处理中。这种数据结构将数据以网格的形式组织，同时结合了树状结构的优点，使得在复杂的数据场景...
《jQuery EasyUI Tree组件深度解析与实践应用》 在Web开发中，为了构建用户友好的交互界面，我们经常需要使用到各种UI库。jQuery EasyUI就是这样一个强大的前端框架，它基于jQuery，提供了丰富的组件，包括今天我们...
本实例将深入探讨`z-tree`如何实现异步加载功能。 异步加载的核心在于只在需要时才获取数据，而不是一次性加载所有数据，这减少了初始加载时间，提高了网页响应速度，尤其是在数据量庞大的情况下。`z-tree`通过API...
以下是一个简单的 JsTree 实例，展示如何初始化和配置 JsTree： ```html <!DOCTYPE html> <link rel="stylesheet" href="jstree/dist/themes/default/style.css" /> <script src="jstree/dist/jstree.min.js"> ...
创建一个jsTree实例通常包括以下步骤： 1. 准备HTML元素作为树的容器。 2. 加载必要的jsTree CSS和JavaScript文件。 3. 初始化jsTree，指定配置项和数据源。 示例代码： ```html <div id="jstree"> $(function ...
3. **$.jstree.defaults**：这是一个对象，包含创建新jstree实例时的默认配置选项。你可以根据项目需求覆盖这些默认值。 4. **$.jstree.defaults.plugins**：默认情况下，这个数组是空的。你需要指定一组插件的名称...
**z-tree简介** z-tree是一款基于JavaScript开发的可高度自定义的树形控件，它在Web应用中常用于展示层级结构...而"trm"文件可能是z-tree实例的具体代码或数据，解压并分析该文件对于学习和实践z-tree的使用至关重要。
**jsTree：构建前端树形结构的利器** jsTree 是一个强大的 JavaScript 库，专用于在 Web 页面上创建交互式的树形结构。它基于纯 JavaScript 编写，无需依赖其他库，因此对于初学者和有经验的开发者来说，都是一个...
在示例中，首先我们看到一个简单的 JSTree 实例创建。这涉及到以下核心配置： 1. **初始化 JSTree**： ```javascript $("#treeview1").jstree({ 'core': { 'multiple': false, // 不允许多选 'data': ay_mssys...
自己手写一个tree实例，tree实现其实很简单，主要先弄清楚html如何显示tree，可以先查看html元素，会发现tree的每个节点都是一个元素，很有规律；然后使用javascript操作dom，例子中有些使用javascript的面向对象，...
本实例"完整的CTreeCtrl控件实例（数据库Access）"是关于如何结合`CTreeCtrl`控件与数据库操作，尤其是Access数据库，实现数据的读取和编辑功能。 1. **CTreeCtrl控件**： `CTreeCtrl`是MFC对Windows API中的`...
初始化一个jsTree实例，你需要指定一个DOM元素作为树的容器，并提供配置对象来定制行为和外观： ```javascript $('#jstree_demo_div').jstree({ 'core': { 'data': [ { "text": "节点1", "children": [ { "text...
通过调用`.jstree()`方法，将这个元素转化为jstree实例。 2. **配置选项**：jstree提供大量的配置选项来定制树的行为，例如`checkbox`配置项用于启用复选框功能。你可以设置`three_state`为`true`，使得节点的选择...
**jsTree 操作详解** jsTree 是一个基于 jQuery 的开源 JavaScript 库，用于创建交互式的树状视图。它提供了一种优雅的方式来呈现和操作数据结构，尤其适用于构建树形菜单或目录。jsTree 支持多种功能，包括动态...