`
tw5566
  • 浏览: 455290 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

tree 通过插件加载图片

阅读更多

通过IconUtility.as 来动态加载tree组件图片:

 

IconUtility.as 源文件如下:

package vim.components
{
	import flash.display.BitmapData;
	import flash.display.Loader;
	import flash.display.LoaderInfo;
	import flash.events.Event;
	import flash.geom.Matrix;
	import flash.net.URLRequest;
	import flash.system.LoaderContext;
	import flash.utils.Dictionary;
	
	import mx.containers.accordionClasses.AccordionHeader;
	import mx.controls.tabBarClasses.Tab;
	import mx.core.BitmapAsset;
	import mx.core.UIComponent;
	
	/**
	 * Provides a workaround for using run-time loaded graphics in styles and properties which require a Class reference
	 */
	public class IconUtility extends BitmapAsset
	{
		
		private static var dictionary:Dictionary;
		
		/**
		 * Used to associate run-time graphics with a target
		 * @param target A reference to the component associated with this icon
		 * @param source A url to a JPG, PNG or GIF file you wish to be loaded and displayed
		 * @param width Defines the width of the graphic when displayed
		 * @param height Defines the height of the graphic when displayed
		 * @return A reference to the IconUtility class which may be treated as a BitmapAsset
		 * @example <mx:Button id="button" icon="{IconUtility.getClass(button, 'http://www.yourdomain.com/images/test.jpg')}" />
		 */
		public static function getClass( target:UIComponent, source:String, width:Number = NaN, height:Number = NaN ):Class {
			if(!dictionary) {
				dictionary = new Dictionary(false);
			}
			//if(source is String) {
				var loader:Loader = new Loader();
				loader.load(new URLRequest(source as String), new LoaderContext(true));
				//source = loader;
			//}
			dictionary[target] = { source:loader, width:width, height:height };
			return IconUtility;
		}
		
		/**
		 * @private
		 */
		public function IconUtility():void {
			addEventListener(Event.ADDED, addedHandler, false, 0, true)
		}
		
		private function addedHandler(event:Event):void {
			if(parent) {
				if(parent is AccordionHeader) {
					var header:AccordionHeader = parent as AccordionHeader;
					getData(header.data);
				} else if(parent is Tab) {
					var tab:Tab = parent as Tab;
					getData(tab.data);
				} else {
					getData(parent);
				}
			}
		}
		
		private function getData(object:Object):void {
			var data:Object = dictionary[object];
			if(data) {
				var source:Object = data.source;
				if(data.width > 0 && data.height > 0) {
					bitmapData = new BitmapData(data.width, data.height, true, 0x00FFFFFF);
				}
				if(source is Loader) {
					var loader:Loader = source as Loader;
					if(!loader.content) {
						loader.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler, false, 0, true);
					} else {
						displayLoader(loader);
					}
				}
			}
		}
		
		private function displayLoader( loader:Loader ):void {
			if(!bitmapData) {
				bitmapData = new BitmapData(loader.content.width, loader.content.height, true, 0x00FFFFFF);
			}
			bitmapData.draw(loader, new Matrix(bitmapData.width/loader.width, 0, 0, bitmapData.height/loader.height, 0, 0));
			if(parent is UIComponent) {
				var component:UIComponent = parent as UIComponent;
				component.invalidateSize();
			}
		}
		
		private function completeHandler(event:Event):void {
			if(event && event.target && event.target is LoaderInfo) {
				displayLoader(event.target.loader as Loader);
			}
		}
		
	}
}

 

 

 

 

引入文件:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
				xmlns:mx="library://ns.adobe.com/flex/mx" layout="absolute" minWidth="955" minHeight="600">
	<fx:Declarations>
		<!-- 将非可视元素(例如服务、值对象)放在此处 -->
	</fx:Declarations>
	
	
	<fx:Script>
		<![CDATA[
			import com.tw.IconUtility;
			
			import mx.controls.Alert;
			import mx.core.UIComponent;
			[Bindable]
			var xml:XML = <dep name="中烟"><user name="tw1" icon="1"></user></dep>;
			
			//var xml:XML = <dep name="中烟"><dep name="1公司"><user name="tw1" icon="1"></user><user name="tw1--333" icon="22"></user></dep><dep name="2公司"></dep></dep>;
			
			/** 改变树图标 */
			private function setTreeIcon(item:Object):Class{
				var url:String = "bao1.jpg";
				var node:XML = item as XML;
				var nodeIcon:String = node.@icon;
				
				if(node!=null && nodeIcon!=null && nodeIcon.length!=0){
					return IconUtility.getClass(tree_deps.itemToItemRenderer(item) as UIComponent, url, 20, 20);
				}else{
					return null;
				}
			}
			
		]]>
	</fx:Script>
	<mx:Tree id="tree_deps" x="195" y="63" height="311" width="326" dataProvider="{xml}" labelField="@name" iconFunction="setTreeIcon"></mx:Tree>
	
</mx:Application>

 

 

源文件请参考附件..

 

分享到:
评论

相关推荐

    Tree,三种tree插件

    在IT领域,"Tree"通常指的是数据结构中的树形结构,它是一种非线性数据结构,由节点(或称为顶点)和边组成,每个...通过学习和实践这三种Tree插件,程序员可以从基础到高级逐步提升自己的技能,更好地服务于项目需求。

    jquery表格树插件GridTree懒加载版本(开源,含demo)

    二、GridTree插件详解 GridTree是一款基于jQuery的表格树插件,其核心功能是将表格数据以树状结构展示,同时支持展开/折叠节点,方便用户浏览和操作。在懒加载版本中,GridTree对原有的代码进行了优化,使其能够处理...

    tree(多种)多种tree的插件

    对于tree插件,jQuery提供了一套简便的API,使得在网页中创建、操作和展示树形数据变得容易。这些插件可能包含以下功能: 1. **节点操作**:添加、删除、移动和复制节点。 2. **UI交互**:折叠/展开节点,拖放节点...

    扩展了一棵jquery的树插件SimpleTree(jquery.simple.tree.js),支持json数据,checkbox树,以及异步加载,

    总结来说,`jQuery SimpleTree`是一个强大而灵活的树形插件,通过JSON数据支持、复选框功能和异步加载,为开发者提供了构建复杂树形结构的强大工具。配合源码学习和示例参考,你可以轻松地将其应用于各种Web开发场景...

    一个jquery tree插件

    1. **动态加载**:jQuery Tree插件支持按需加载子节点,减少初次加载时的数据量,提高页面响应速度。 2. **可配置性**:提供丰富的配置选项,如节点的图标、展开/折叠状态、拖放功能等,可以根据需求进行定制。 3. *...

    AjaxTree实现动态加载

    总结来说,"AjaxTree实现动态加载"是利用Ajax技术优化的树形数据展示方法,通过按需加载节点数据,提高了Web应用的性能和用户体验。这种技术广泛应用于各种需要层次结构数据展示的场景,如文件管理系统、组织结构图...

    jsTree 很好用的动态加载数

    动态加载是 jsTree 的核心特性之一,它允许在用户滚动或展开树节点时按需加载数据,而不是一次性加载所有数据。这种机制对于处理大量数据特别有用,因为它减少了初始页面加载时间,提高了用户体验。通过设置适当的...

    TREEPLAN.XLA

    treeplan 决策树 excel插件。Treeplan是一种构建决策树插件

    DirectoryTree插件-jquery树形滑动导航

    通过理解和掌握DirectoryTree插件的使用,开发者可以提升网站或应用的用户体验,特别是对于需要展示多层分类或目录的场景。在实际项目中,根据需求调整和扩展插件,将使导航功能更加贴近用户需求,提升整体的交互...

    JSTree(js写的树形菜单,支持加载10000节点以上)

    1. **高性能**:JSTree通过延迟加载和分页策略,确保在处理大数据集时保持流畅的用户体验。它仅在需要时加载节点,降低了内存占用和计算需求。 2. **交互性**:提供了丰富的API和事件系统,允许开发者自定义各种...

    treeplan.xla

    Treeplan决策树 excel插件。Treeplan是一种构建决策树的很轻巧的excel插件,可以做出比较规范的决策树,并可以自动计算结果。资源在Excel2016上验证可用。

    jQuery插件之二:Simple Tree

    确保它们在页面中正确加载,并且jQuery库在Simple Tree插件之前加载。 2. **HTML结构**:创建一个基础的HTML元素,如`&lt;ul&gt;`,作为树的基础结构。每个子节点表示为`&lt;li&gt;`,并且可以通过自定义属性(如"data-id"和...

    jsTree 树状菜单插件

    **jsTree 树状菜单插件*...总之,jsTree 是一款功能强大、易于使用的树状菜单插件,通过其丰富的功能和广泛的实例支持,可以方便地集成到各种Web应用中,提升用户体验。无论是新手还是经验丰富的开发者,都能从中受益。

    jsTree操作 jsTree插件简介

    jsTree 支持多种功能,包括动态加载、异步数据获取、节点的增删改查、搜索、拖放操作以及自定义主题和类型。 **初始化 jsTree** 在使用 jsTree 时,首先需要对元素进行初始化。以下是一个简单的初始化示例: ```...

    jquery-tree树型插件

    jQuery Tree插件是一款轻量级的JavaScript库,基于流行的jQuery框架,旨在简化树型结构的创建。它提供了动态加载、节点操作、事件监听等一系列功能,使开发者能够方便地构建具有拖放、折叠、展开、搜索等特性的树型...

    jstree 插件开发详细文档

    ### jstree插件开发详细知识点 #### 一、jstree概述 jstree 是一个高度可配置的 jQuery 插件,用于渲染和交互树结构。它支持多种功能,如拖放、多选、异步加载数据等,并且可以通过各种插件进行扩展。 #### 二、...

    jstree插件包和DMEO

    **jstree插件详解与应用** `jstree`是一款功能强大的JavaScript库,用于创建交互式的树形结构。它支持HTML、JSON等多种数据源,适用于构建目录结构、组织图表或者复杂的导航菜单。在Web开发中,`jstree`因其易用性...

    手机端js tree

    4. 模块化和插件系统:js Tree可能包含各种插件,如拖放、搜索、检查框等,这些功能可以通过模块化设计轻松添加或移除,增强了代码的灵活性和可维护性。 三、移动端适配与优化 1. 响应式设计:js Tree需要根据设备...

    treeplan Excel决策树

    excel treeplan.xla decision tree excel treeplan.xla decision tree excel treeplan.xla decision tree excel treeplan.xla decision tree excel treeplan.xla decision tree

Global site tag (gtag.js) - Google Analytics