第十五节Tree树形菜单组件运用

合集下载

第15讲 TreeView控件应用

程序设计李德奇主编
14
三、从XML文件读取节点数据（4/5）文件读取节点数据
这个XML文档中只允许有一个根标签 <TREENODES></TREENODES>，所有的节点标签都必须放在这个根标签之内，标签标记TREENODES必须大写。每个节点标签<TreeNode ></TreeNode>中定义一个节点，节点标签可以嵌套，嵌套层次表明了节点的结构关系。 (三)指定 (三)指定TreeView控件的TreeNodeSrc属性指定TreeView控件的控件的TreeNodeSrc属性需要指定TreeView控件的TreeNodeSrc属性，以指示 TreeView控件的节点数据和结构来自文件。注打开 TreeView控件的属性窗口，在TreeNodeSrc属性上指定其值为刚编写的那个文件“XMLTreeViewNode.xml”。
程序设计
李德奇主编
15
三、从XML文件读取节点数据（5/5）文件读取节点数据
(四)控件效果四控件效果
运行程序，效果如下图。
程序设计
李德奇主编
16
四、TreeView控件应用举例（1/10）控件应用举例
(一)获取用户选择的节点一获取用户选择的节点程序运行后，用户会在TreeView控件上操作，或者展开节点，或者折叠节点，或者选择（打开）某一个节点。当用户选择（打开）了某个节点之后，程序必然需要有所动作来对用户的选择作出响应。例如在Windows资源管理器中，当用户在左边的资源结构树上选择某个节点后，需要在右边的资源内容区显示出该节点的所有资源。在Web应用程序的页面上使用 TreeView控件时，一般也会参照这个习惯。为此，获取用户对节点的选择信息就显得必要了。 (二)两种获得用户选择节点信息的方法二两种获得用户选择节点信息的方法 ①TreeView控件的SelectedNodeIndex属性保存了用户选择节点的索引号，该属性的文本是形如”x.y.z..”的结构。例如当TreeView1. SelectedNodeIndex.Text的值为“0.2.1”时，用户选择的节点在第一层的索引号为0，第二层的索引号为2，第三层的索引号为1，根据这个索引号可以确定用户选择了哪个节点。 17 程序设计李德奇主编

elementUITree树形控件的官方使用文档

elementUITree树形控件的官⽅使⽤⽂档Tree 树形控件---⽤清晰的层级结构展⽰信息，可展开或折叠。

基础⽤法基础的树形结构展⽰。

<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree><script>export default {data() {return {data: [{label: '⼀级 1',children: [{label: '⼆级 1-1',children: [{label: '三级 1-1-1'}]}]}, {label: '⼀级 2',children: [{label: '⼆级 2-1',children: [{label: '三级 2-1-1'}]}, {label: '⼆级 2-2',children: [{label: '三级 2-2-1'}]}]}, {label: '⼀级 3',children: [{label: '⼆级 3-1',children: [{label: '三级 3-1-1'}]}, {label: '⼆级 3-2',children: [{label: '三级 3-2-1'}]}]}],defaultProps: {children: 'children',label: 'label'}};},methods: {handleNodeClick(data) {console.log(data);}}};</script>可选择适⽤于需要选择层级时使⽤。

layui中的tree树组件方法

layui中的tree树组件方法
在Layui中，tree树组件提供了一系列方法用于操作树，常用
的方法有：
1. render(elem, data): 渲染树组件，其中elem为容器的选择器，data为树的数据。

2. on(eventName, callback): 绑定树节点事件，可以监听节点的
点击、展开、折叠等事件，eventName为事件名称，callback
为事件回调函数。

3. reload(elem, data): 重新加载树组件，更新树的数据。

4. setChecked(elem, checked): 设置节点选中状态，elem为节点
的选择器，checked为布尔值，true表示选中，false表示取消
选中。

5. setDisabled(elem, disabled): 设置节点禁用状态，elem为节点
的选择器，disabled为布尔值，true表示禁用，false表示启用。

6. addNodes(elem, nodes): 添加节点，elem为节点的选择器，nodes为要添加的节点数据数组。

7. delNodes(elem): 删除节点，elem为节点的选择器，删除节
点同时会删除其所有子节点。

8. updateNode(elem, data): 更新节点数据，elem为节点的选择器，data为要更新的节点数据。

以上是常用的tree树组件方法，通过调用这些方法可以实现对树的增删改查操作。

树形菜单jsTree使用方法

树形菜单jsTree使⽤⽅法jsTree版本：3.0.4在 MVC中使⽤jsTreeModel：public class Department{public int Id { get; set; }public string Name { get; set; }public int PId { get; set; }}数据库：Controller：jsTree既可以⼀次性把所有节点都加载到客户端，也可以只加载⼀层，点击节点后再去服务端获取下层节点。

对于⼩的菜单可以⼀次性加载完，如果节点很多，可以按需加载（lazy loading）。

1、⼀次性加载完所有节点public JsonResult GetTreeData(int clickId = 0){// use databasevar db=new Salary.Models.EntityContext();/* ⼀次性加载完所有节点.* 前端只需配置 'data': {'url': '/Home/GetTreeData','dataType': 'json'* } 不⽤给服务端传值* 服务端不需写where*/var items=from item in db.Departmentselect new{id = item.Id,parent = item.PId.ToString() == "0" ? "#" : item.PId.ToString(), // root必须是# ！text = };return Json(items, JsonRequestBehavior.AllowGet);}2、按需加载节点（lazy loading）public JsonResult GetTreeData(int clickId = 0){// use databasevar db=new Salary.Models.EntityContext();/* 异步加载节点（按需）前端需提供id传给服务端：'data': function (node) {return { id: node.id };}后端要在linq中加where筛选*/var items=from item in db.Departmentwhere item.PId == clickId // 在服务端要把所有上级节点找出来select new// 匿名类可以添加需要的字段，⽐如HasChildren{id = item.Id,parent = item.PId.ToString() == "0" ? "#" : item.PId.ToString(), // root必须是# ！text = ,children = db.Department.Any(p => p.PId == item.Id) // true|false 是否有⼦项};return Json(items, JsonRequestBehavior.AllowGet);}View：<div id="jstree">@section scripts{<link href="~/Content/jstree/themes/default/style.min.css" rel="stylesheet"/><script src="~/Scripts/jstree/jstree.js"></script><script>$(document).ready(function () {$("#jstree").jstree({"core": {//'initially_open':["abc"],'data': {'url': '/Home/GetTreeData','dataType': 'json','data': function (node) { // 传给服务端点击的节点//return { id: node.id == "#" ? "0" : node.id };return { clickId: node.id };},success: function () {//alert('ok');}}}});// 展开节点$("#jstree").on("loaded.jstree", function (event, data) {// 展开所有节点//$('#jstree').jstree('open_all');// 展开指定节点//data.instance.open_node(1); // 单个节点（1 是顶层的id）data.instance.open_node([1, 10]); // 多个节点 (展开多个⼏点只有在⼀次性装载后所有节点后才可⾏） });// 所有节点都加载完后$("#jstree").on("ready.jstree", function (event, data) {//alert('all ok');data.instance.open_node(1); // 展开root节点//// 隐藏根节点 /questions/10429876/how-to-hide-root-node-from-jstree$("#1_anchor").css("visibility", "hidden");$("li#1").css("position", "relative")$("li#1").css("top", "-20px")$("li#1").css("left", "-20px")$(".jstree-last .jstree-icon").first().hide();});// 获得点击节点的id$('#jstree').on("changed.jstree", function (e, data) {console.log("The selected nodes are:");console.log(data.selected);alert('node.id is:' + data.node.id);alert('node.text is:'+data.node.text);console.log(data);// TODO: 传递给Tab//$.ajax({// 'url': 'Home/GetTreeData/',// 'data': { 'id': data.node.id }//});});});// end ready</script>根节点的⽗项是0，根节点只有⼀个，似乎显⽰出来也不好看：所以我们把它隐藏起来：PS:ready 和loaded 的区别：loaded.jstree: triggered after the root node is loaded for the first timeready.jstree : triggered after all nodes are finished loading参考：--End--。

element plus中在tree 树形控件中icon的用法

element plus中在tree 树形控件中icon的用法1. 引言1.1 概述在现代前端开发中，树形控件是一种常见且有着广泛应用的界面组件。

树形控件以树状结构展示数据，通常用于展示层级关系、导航菜单或分类等场景。

Element Plus作为Vue.js的一套UI组件库，提供了强大的Tree树形控件，可以帮助开发者快速构建功能完善、体验优秀的树形结构。

1.2 文章结构本文将重点介绍Element Plus中Tree树形控件中Icon的使用方法。

首先，我们将简要介绍Element Plus这个UI组件库，并详细说明Tree 树形控件的作用和用法。

接下来，我们将聚焦于本文主题——Icon在Tree树形控件中的重要作用以及具体使用方法。

最后，我们会提供一些示例和案例分析，帮助读者更好地理解和应用所学内容。

1.3 目的通过本文对Element Plus中Tree树形控件中Icon的用法进行详细解析，并配以实例和案例分析，目的在于帮助读者深入理解如何利用Icon增强Tree树形控件的交互效果和视觉表现。

同时，展望未来Tree树形控件Icon的发展趋势，为读者提供对于相关技术的进一步探索和应用思路。

通过本文的阅读，读者将能够在Element Plus中灵活运用Icon，提升Tree树形控件的用户体验和功能扩展性。

2. 正文2.1 Element Plus简介Element Plus是一套基于Vue.js 2.0的桌面端组件库，为开发者提供了丰富的UI组件和工具。

它拥有易用的API和漂亮的样式，可以帮助开发者快速构建出现代化的Web应用。

2.2 Tree 树形控件的作用和用法2.2.1 树形控件的基本概念和特点树形控件是一种常见的用户界面组件，可以以树状结构展示数据，并支持对数据进行展开、折叠、选择等操作。

它主要由节点、父子关系、层级结构等要素构成。

在实际应用中，树形控件通常用于展示具有层次结构的数据，比如文件目录、组织架构等。

unitreemenu的创建与使用

一、单位树形菜单的定义单位树形菜单是一种用于展示组织结构或分类信息的界面元素，通常呈现为树状结构，方便用户查看和操作。

在实际应用中，单位树形菜单常用于企业管理系统、组织架构展示、文件目录结构等场景。

二、单位树形菜单的创建1. 数据准备在创建单位树形菜单之前，首先需要准备好相应的数据。

这些数据通常包括单位的名称、单位的编号、单位的上级单位编号等信息。

根据具体情况，还可以包括单位的层级关系、单位的扩展信息等内容。

2. 数据结构设计根据准备好的数据，需要设计单位树形菜单所需的数据结构。

通常可以采用树形结构，利用父子关系来组织单位的层级结构。

3. 数据库建模将设计好的数据结构映射到数据库中，创建相应的表格和字段，存储单位树形菜单所需的数据。

4. 后端接口开发在后端系统中，需要开发相应的接口，用于查询、新增、编辑、删除单位信息，并支持树形结构的展示和操作。

5. 前端界面开发在前端界面中，需要创建相应的组件或界面元素，用于展示单位树形菜单，并实现对单位信息的增删改查等操作。

6. 数据关联将后端接口和前端界面进行关联，实现数据的双向绑定，以便实现单位树形菜单的展示和操作。

三、单位树形菜单的使用1. 数据加载与展示在页面加载时，通过后端接口查询单位的数据，并根据数据结构构建树形菜单。

通常可以采用递归的方式，遍历整个单位数据树，生成对应的界面元素。

2. 节点操作用户可以通过点击单位节点来展开或收起子级节点，实现对单位层级结构的查看和导航。

3. 编辑操作单位树形菜单通常会提供编辑功能，允许用户新增、编辑或删除单位信息。

用户可以通过右键菜单或相应的操作按钮来进行相关操作。

四、单位树形菜单的优化1. 数据异步加载当单位数据较大时，可以采用异步加载的方式，根据用户操作动态加载数据，提升页面加载速度和交互体验。

2. 数据缓存可以对单位数据进行缓存，减少对后端接口的频繁请求，提高系统的响应速度。

3. 数据筛选与搜索为了方便用户查找特定的单位信息，可以提供筛选条件和搜索功能，帮助用户快速定位目标单位。

Tree控件的使用

Tree控件的使用本节将重点讨论LabVIEW 中的Tree 控件，也许是控件本身的使用比较麻烦，导致很多程序员不愿意使用该控件。

其实在大多数的应用程序中均可以看到Tree 的身影，如Windows 操作系统中的资源管理器左侧的文件列表，通常Tree 控件可以用来显示一些有组织的、分类明确的数据。

1.1 编辑Tree 控件的外观Tree 控件位于LV 的控件选板List&Table 子选板中，如图 1 所示。

从背面板可以看出Tree 实质上是一种字符串（String）类型，这难免会让人费解：如何将前面板大量的条理性的数据与String 对应呢？图 1 Tree 控件选择工具选板中的Edit Text 工具，可以直接在Tree 控件中输入数据。

通过Tree 控件的右键快捷菜单Visible Items 菜单项，可以改变Tree 控件的显示外观，如图 2 所示。

可以逐一勾选/不勾选该菜单项中的菜单，就明确了各个菜单项对应的含义。

图 2 改变Tree 控件的显示外观在Visible Items 中有一个Symbols 菜单项，从外观上看勾选或不勾选该选项没有什么区别。

原来，LabVIEW 允许对Tree 中的每一行指定一个符号，显示在行首。

要显示该符号首先需要勾选Visible ItemsSymbols 选项，其次在某一行上右击弹出的快捷菜单上选择Item Symbol 菜单项，并选择一个符号。

如图 3 所示。

LabVIEW 提供了42 种符号可供选择，其中第1 种为空（默认值，因此前面在勾选Visible ItemsSymbols 后看不到变化）。

可以通过该方式为每一行添加各种不同的符号。

图 3 选择Symbol在Windows 资源管理器中，我们可以看到Tree 是能够显示层级关系的。

这一点可以通过选择右键快捷菜单中的Indent Item 和Outdent Item 实现，在第图中的3 行上右击选择Indent Item，则第3 行变成了第2 行的子行，如图4 所示。

ElementUITree树形控件的使用并给节点添加图标

ElementUITree树形控件的使⽤并给节点添加图标前⾔：因为项⽬需要⽤Vue做⼀个管理系统，其中有⼀个公司部门的管理页⾯有⽤到ElementUI 的树形控件，但是结构中没有使⽤chexkBox选项框，针对这个功能碰到的⼀些问题做⼀下总结⼀，数据渲染1）在<el-tree>标签中绑定data属性2）在vue实例的data中声明list变量3）从后台获取到的数据是以数组⾥⾯嵌套多个对象的结构并赋值给list，当前的数据是OrgName为当前结构名称，Children作为⼦分⽀数组，⼦分⽀中的结构与当前结构⼀致4）在页⾯中展⽰结构的⽅法是在<el-tree>标签中绑定porps属性，并在vue实例的data中⽤label属性定义显⽰的名称，⽤childern属性绑定展⽰的⼦分⽀数据5）最后展⽰的结构如下⼆，点击当前分⽀获取当前分⽀与上级分⽀的值1）此处使⽤的是@node-click事件并绑定⼀个函数，函数在vue实例的methods中定义，并可以接收两个参数node与data2）node是⼀个对象，就是点击当前分⽀获得的数据，如果只需要当前层级的数据的话就可以使⽤node，后台有⼀并返给我上级的ID，但是页⾯中点击分⽀后还需要显⽰上级的名称，所以此处使⽤node就不太够3）data同样也是⼀个对象，他的data属性包含的就是当前分⽀的值，其中的parent属性就包含了他上级的值，甚⾄⾥⾯的parent属性还包含更上⼀级的值⼀直到最外层，可以根据⾃⼰当前项⽬的需要来选择使⽤data还是node来取到⾃⼰需要的值三，el-tree 树形控件给节点添加图标<template><div class="tree"><el-tree :data="data5" node-key="id" default-expand-all ><span class="custom-tree-node" slot-scope="{ node, data }"> <span><i :class="node.icon"></i>{{ bel }}</span></span></el-tree></div></template><script>export default {data () {return {data5: [{id: 1,label: '⼀级 1',icon:'el-icon-success',children: [{id: 4,label: '⼆级 1-1',children: [{id: 9,label: '三级 1-1-1',icon: 'el-icon-info'}, {id: 10,label: '三级 1-1-2'}]}]}, {id: 2,label: '⼀级 2',children: [{id: 5,label: '⼆级 2-1',}, {id: 6,label: '⼆级 2-2'}]}, {id: 3,label: '⼀级 3',children: [{id: 7,label: '⼆级 3-1'}, {id: 8,label: '⼆级 3-2'}]}]}}}</script><style scoped></style>到此这篇关于ElementUI Tree 树形控件的使⽤并给节点添加图标的⽂章就介绍到这了,更多相关Element Tree 树形控件内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！。

tree 树形控件高级用法 -回复

tree 树形控件高级用法-回复树形控件是一种常用的用户界面元素，它通过层级结构展示数据并允许用户在不同层级之间进行导航。

在本文中，我们将深入探讨树形控件的高级用法，包括自定义节点、动态加载数据、搜索和过滤等功能。

通过这些高级用法，我们可以提供更加灵活和强大的用户体验，满足各种复杂业务需求。

一、自定义节点1. 创建树形控件时，我们通常希望每个节点具有不同的样式和行为。

为了实现这一点，我们可以自定义节点。

2. 首先，我们需要创建一个自定义节点类，继承自树形控件的节点基类。

在这个类中，我们可以添加自定义的属性和方法，以满足特定的需求。

3. 接下来，我们需要重写节点的绘制方法，实现如何绘制自定义节点的外观。

这可以通过重写OnPaint方法来完成。

4. 同样地，我们也可以重写节点的交互方法，例如鼠标点击事件。

这样，我们可以在用户与节点交互时执行自定义的行为。

二、动态加载数据1. 在某些情况下，我们可能需要根据用户的操作来动态加载树形控件的数据。

这可以提高性能和用户体验。

2. 首先，我们需要定义数据的结构，并创建一个方法来获取树形控件的根节点数据。

3. 当用户展开一个节点时，我们可以在节点的展开事件中调用获取数据的方法，并将数据添加到节点的子节点集合中。

4. 同样地，当用户折叠一个节点时，我们可以选择从节点的子节点集合中移除数据，以减少内存消耗。

三、搜索和过滤1. 搜索和过滤功能可以帮助用户快速找到所需的节点。

为了实现这一点，我们可以添加搜索和过滤的功能。

2. 首先，我们需要添加一个搜索框和一个过滤器，以便用户输入关键字或选择过滤条件。

3. 当用户输入关键字时，我们可以使用递归算法在树形控件中搜索匹配的节点，并将它们高亮显示。

4. 当用户选择过滤条件时，我们可以使用LINQ查询语句过滤掉不符合条件的节点，以实现数据的动态过滤。

结论：通过自定义节点、动态加载数据、搜索和过滤等高级用法，我们可以将树形控件的功能提升到一个新的水平。

树形控件使用手册

树形控件使用手册1.启动report studio，进入查询资源管理器。

2.拖拽tree_SQL控件到输入框（这个是获取当前登录用户的机构信息）。

3.进入页面资源管理器-----提示页面4.拖拽tree_dataItem_prompt和treeHtml_prompt控件到输入页面（一定要在第2步之后再做这一步），tree_dataItem_prompt控件要在treeHtml_prompt控件之前。

双击“HTML项目”，将showTree1.js里面的全部拷贝然后粘贴进去，若提示条件在报表页面，那么需要将showTree2.js里面的代码都粘贴进去。

5.修改tree_dataItem_prompt控件中的参数和名称值，这个值一定要跟filter里面使用的参数名称一样。

6.双击treeHtml_prompt控件的html标志。

如果是单选，需要把var radioselect = false;修改为var radioselect = true;注意：多选情况下，在过滤器处设置时候需要设置为“in ( ?f_company? )”如下图：7.（1）在页面添加“HTML项目”，并双击“HTML项目”，在里面放置代码“<div id='divCompany' style="display:none"><span id='spanCompany'>”（2）在页面添加“文本项目”，然后在“文本项目”源类型处将其修改为“报表表达式”，并在报表表达式处输入如下代码：“ParamDisplayValue('f_company')”（3）在页面添加“HTML项目”，并双击“HTML项目”，在里面放置代码“</span></div>”以上三步如下图：。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

第十五节Tree树形菜单运用15.1认识从上面那个图标可以看出这个类似于HTML网页经常出现的树形菜单，2,3级菜单都可以用，但是这个菜单大家最熟悉就莫过于QQ的好友分组，以前的版本Tree要实现QQ好友分组效果会有点费事，但是现在呢，嘿嘿易如反掌，所以我们下一小节先讲下基本的运用。

15.2Tree运用照旧我们先从组件库里找到Tree：详情请见下图（组件库找组件图1）然后拉入到场景：详情请见图2：很多人给我说有些组件为什么拉入到场景，跟组件图标样子不一样呢，呵呵这句话让我想到了我上次去饭店点菜，点出来的菜跟菜单里的菜完全是两个妈生的，这差别太大，咳跑题，呵呵我只能说是一模一样，因为他也属于数据容器，因为没有数据所以就是空白咯。

下来我们切换到源代码窗口看到了生成的代码：<mx:Tree></mx:Tree>虽然这个组件还是mx的马甲，但是他充满了s的概念，标准的混血儿。

既然说了他是数据容器，肯定先绑定数据才看的到效果，我们对一个事物好奇仅限于他的功能：是FLEX3转FLEX4.5朋友注意，在FLEX4.5版本很多数据容器都不在支持简单的数据集合，比如Array都不在支持都会报错。

支持的数据接口IList接口的话就可以运用。

我们看下官方给我们提供数据的类型：import mx.collections.ArrayCollection;import mx.collections.XMLListCollection;import mx.collections.ArrayList;常用的就这几种，一个是Array扩展版，一个XML扩展版，因为现在数据都需要多维数据，Array 做负责数据有点牵强，ArrayList所以只有扩展来实现更多功能。

上面几个类似就不一一介绍了，下面开始动真格。

首先我们在目录下建立个assets资源文件夹在里面放入我们的图片：详情看图3然后我们就开始写数据源：[Bindable]Private var userHeadArr:ArrayCollection=newArrayCollection([{labels:"女自由职业者",head:"assets/obj1.png"},{labels:"男自由职业者",head:"assets/obj2.png"},{labels:"女工薪族",head:"assets/obj3.png"},{labels:"男工薪族",head:"assets/obj4.png"},{labels:"女商人",head:"assets/obj6.png"},{labels:"男商人",head:"assets/obj5.png"}]);因为一般像数据组件的数据接口都需要绑定数据，这样数据变更了他也会动态的获取.数据写好了现在开始串联到组件里去<mx:Tree width="171"height="166"dataProvider="{userHeadArr}"></mx:Tree>是不是绑定好了，我们运行下看下：为什么显示全是object对象，虽然我们数据源是由N个对象组成的，但是这不是我要的结果。

Tree:你NND，你只是把数据给我，你有没说要显示什么，我也只能告诉你它是对象。

Ken:我的错，我的错。

很多新手在这方面都被这样问题难倒过，解决办法很简单啃API啊。

API有个属性“labelFiled"：数据提供程序项目中作为标签显示的字段名称。

默认情况下，列表将在每个项目上查找label属性并将其显示出来。

但是，如果该数据对象不包含label属性，则可以将labelField属性设置为使用数据对象中的其它属性。

例如，在查看从数据库中提取的一组人名时，可以使用“FullName”。

所以总体意思我们想让Tree显示什么值的话就得输入我们数据源的键值，比如我们想让他显示我们数据源的labels<mx:Tree width="171"height="166"dataProvider="{userHeadArr}"labelField="labels"/>这回在运行下看下：、这回是不是得到我们想要的东西。

其实就是这么简单的，细心的童鞋会发现为什么和tree不太一样，Tree应该有一个箭头，点击下展开，在点击下隐藏，因为我们数据是一维数据，要想出现那种效果需要使用XMLListCollection对象，他是使用多级菜单最好的方法：<fx:Declarations><s:XMLListCollection id="xml"><fx:XMLList><ids labels='职业'><ids labels='女自由职业者'head='assets/obj1.png'/><ids labels="男自由职业者"head='assets/obj2.png'/><ids labels="女工薪族"head='assets/obj3.png'/><ids labels="男工薪族"head='assets/obj4.png'/><ids labels="女商人"head='assets/obj5.png'/><ids labels="男商人"head='assets/obj6.png'/></ids></fx:XMLList></s:XMLListCollection></fx:Declarations>这种标签<fx:Declarations>就是不可视话组件就写到这标签里，可视化标签就不需要写在这里面紧记。

我们写了个xmllist添加到XMLListCollection里然后他就相当了有一个菜单了,我们把它绑定到Tree里看下<mx:Tree width="171"height="166"dataProvider="{xml}"labelField="@labels"/>注意@：在这里绑定键值为什么要用@,这是是xml里的访问元素访问控制符。

好了开始运行看下：默认的是隐藏的点击下就打开这次是不是跟我们组件库里的Tree图标差不多，如果大家觉得一个少的话可以多复制几个<idx>标签.<fx:Declarations><s:XMLListCollection id="xml"><fx:XMLList><ids labels='职业'><ids labels='女自由职业者'head='assets/obj1.png'/><ids labels="男自由职业者"head='assets/obj2.png'/><ids labels="女工薪族"head='assets/obj3.png'/><ids labels="男工薪族"head='assets/obj4.png'/><ids labels="女商人"head='assets/obj5.png'/><ids labels="男商人"head='assets/obj6.png'/></ids><ids labels='职场'><ids labels='女自由职业者'head='assets/obj1.png'/><ids labels="男自由职业者"head='assets/obj2.png'/><ids labels="女工薪族"head='assets/obj3.png'/><ids labels="男工薪族"head='assets/obj4.png'/><ids labels="女商人"head='assets/obj5.png'/><ids labels="男商人"head='assets/obj6.png'/></ids></fx:XMLList></s:XMLListCollection></fx:Declarations>我们有多复制了一个，这次在看下效果：以此类推大家喜欢用多少个，就复制多少个XML标签就可以达到这个效果，这样一来是不是感觉有点像QQ好友分组，既然这样我们下一节就模拟QQ好友分组。

15.3Tree高级运用继上一节内容，我们点击场景中Tree组件，会显示下面属性界面：然后继续点击，这个粉红色按钮旁边的下箭头会弹出下面这个框见图6：(图6)我们点击创建项呈示器见图7：（图7）我们设置下这个项呈示器放在的包也就是项目的目录，起个名字点击完成<?xml version="1.0"encoding="utf-8"?><s:MXTreeItemRenderer xmlns:fx="/mxml/2009"xmlns:s="library:///flex/spark"xmlns:mx="library:///flex/mx"><s:states><s:State name="normal"/><s:State name="hovered"/><s:State name="selected"/></s:states><s:HGroup left="0"right="0"top="0"bottom="0"verticalAlign="middle"> <s:Rect id="indentationSpacer"width="{treeListData.indent}"percentHeight="100"alpha="0"><s:fill><s:SolidColor color="0xFFFFFF"/></s:fill></s:Rect><s:Group id="disclosureGroup"><s:BitmapImage source="{treeListData.disclosureIcon}"visible="{treeListData.hasChildren}"/></s:Group><s:BitmapImage source="{treeListData.icon}"/><s:Label id="labelField"text="{bel}"paddingTop="2"/> </s:HGroup></s:MXTreeItemRenderer>我们看下设计界面生成的界面是什么就是这样咯，对了怎么把我们数据源的图像URL串联起来呢？？现在唯一线索也就是treeListDate从它的字面意思可以理解是tree列表的数据那肯定是他没错，我们试着用点访问符看下他的属性看能帮助咱们解决问题吗？虽然属性很多，但是都没有俺们的head键值，我还以为我们输入数据源他会动态添加进来，看来我想的太美好，现实很残酷，但是眼尖的我发现了item对象有木有，俺伤的起啊，这个我没理解错就是一个item对应着一个item对象，所以我们想获取URL有希望，打个广告：有爱就有希望，有希望就不要放弃----来自李宇春语录<s:BitmapImage source="{treeListData.item.head}"/>我们该成这样了运行下看看效果：奇怪我们绑定了数据源的head的键值怎么没出现图片。