通过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>
源文件请参考附件..
分享到:
相关推荐
二、GridTree插件详解 GridTree是一款基于jQuery的表格树插件,其核心功能是将表格数据以树状结构展示,同时支持展开/折叠节点,方便用户浏览和操作。在懒加载版本中,GridTree对原有的代码进行了优化,使其能够处理...
在IT领域,"Tree"通常指的是数据结构中的树形结构,它是一种非线性数据结构,由节点(或称为顶点)和边组成,每个...通过学习和实践这三种Tree插件,程序员可以从基础到高级逐步提升自己的技能,更好地服务于项目需求。
通过上述内容,我们可以看到决策树Excel插件TreePlan为用户提供了一个方便、直观的工具,用于解决实际生活和工作中的决策难题,尤其是在存在不确定性的情况下。通过学习和掌握这类工具,用户可以在没有高级编程技能...
对于tree插件,jQuery提供了一套简便的API,使得在网页中创建、操作和展示树形数据变得容易。这些插件可能包含以下功能: 1. **节点操作**:添加、删除、移动和复制节点。 2. **UI交互**:折叠/展开节点,拖放节点...
总结来说,`jQuery SimpleTree`是一个强大而灵活的树形插件,通过JSON数据支持、复选框功能和异步加载,为开发者提供了构建复杂树形结构的强大工具。配合源码学习和示例参考,你可以轻松地将其应用于各种Web开发场景...
动态加载是 jsTree 的核心特性之一,它允许在用户滚动或展开树节点时按需加载数据,而不是一次性加载所有数据。这种机制对于处理大量数据特别有用,因为它减少了初始页面加载时间,提高了用户体验。通过设置适当的...
1. **动态加载**:jQuery Tree插件支持按需加载子节点,减少初次加载时的数据量,提高页面响应速度。 2. **可配置性**:提供丰富的配置选项,如节点的图标、展开/折叠状态、拖放功能等,可以根据需求进行定制。 3. *...
总结来说,"AjaxTree实现动态加载"是利用Ajax技术优化的树形数据展示方法,通过按需加载节点数据,提高了Web应用的性能和用户体验。这种技术广泛应用于各种需要层次结构数据展示的场景,如文件管理系统、组织结构图...
1. **高性能**:JSTree通过延迟加载和分页策略,确保在处理大数据集时保持流畅的用户体验。它仅在需要时加载节点,降低了内存占用和计算需求。 2. **交互性**:提供了丰富的API和事件系统,允许开发者自定义各种...
treeplan 决策树 excel插件。Treeplan是一种构建决策树插件
Treeplan决策树 excel插件。Treeplan是一种构建决策树的很轻巧的excel插件,可以做出比较规范的决策树,并可以自动计算结果。资源在Excel2016上验证可用。
通过理解和掌握DirectoryTree插件的使用,开发者可以提升网站或应用的用户体验,特别是对于需要展示多层分类或目录的场景。在实际项目中,根据需求调整和扩展插件,将使导航功能更加贴近用户需求,提升整体的交互...
**jsTree 树状菜单插件*...总之,jsTree 是一款功能强大、易于使用的树状菜单插件,通过其丰富的功能和广泛的实例支持,可以方便地集成到各种Web应用中,提升用户体验。无论是新手还是经验丰富的开发者,都能从中受益。
jsTree 支持多种功能,包括动态加载、异步数据获取、节点的增删改查、搜索、拖放操作以及自定义主题和类型。 **初始化 jsTree** 在使用 jsTree 时,首先需要对元素进行初始化。以下是一个简单的初始化示例: ```...
确保它们在页面中正确加载,并且jQuery库在Simple Tree插件之前加载。 2. **HTML结构**:创建一个基础的HTML元素,如`<ul>`,作为树的基础结构。每个子节点表示为`<li>`,并且可以通过自定义属性(如"data-id"和...
jQuery Tree插件是一款轻量级的JavaScript库,基于流行的jQuery框架,旨在简化树型结构的创建。它提供了动态加载、节点操作、事件监听等一系列功能,使开发者能够方便地构建具有拖放、折叠、展开、搜索等特性的树型...
### jstree插件开发详细知识点 #### 一、jstree概述 jstree 是一个高度可配置的 jQuery 插件,用于渲染和交互树结构。它支持多种功能,如拖放、多选、异步加载数据等,并且可以通过各种插件进行扩展。 #### 二、...
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
**jstree插件详解与应用** `jstree`是一款功能强大的JavaScript库,用于创建交互式的树形结构。它支持HTML、JSON等多种数据源,适用于构建目录结构、组织图表或者复杂的导航菜单。在Web开发中,`jstree`因其易用性...