`

动态加载yui treeview

阅读更多

 

<script>

/*create namespace for examples:*/
YAHOO.namespace("example");

/* Using Crockford's "Module Pattern": */
YAHOO.example.treeExample = function() {

	var tree, currentIconMode;

    function changeIconMode() {
        var newVal = parseInt(this.value);
        if (newVal != currentIconMode) {
            currentIconMode = newVal;
        }

        buildTree();
    }
	
		function loadNodeData(node, fnLoadComplete) {
			//We'll randomize our loader with stock data; in many implementations,
			//this step would be replaced with an XMLHttpRequest call to the server
			//for more data.
			
			//Array of India's States
			var aStates = ["Andhra Pradesh","Arunachal Pradesh","Assam","Bihar","Chhattisgarh","Goa","Gujarat","Haryana","Himachal Pradesh","Jammu and Kashmir","Jharkhand","Karnataka","Kerala","Madhya Pradesh","Maharashtra","Manipur","Meghalaya","Mizoram","Nagaland","Orissa","Punjab","Rajasthan","Sikkim","Tamil Nadu","Tripura","Uttaranchal","Uttar","Pradesh","West Bengal"];
		
			//Random number determines whether a node has children
			var index = Math.round(Math.random()*100);
			
			//if our random number is in range, we'll pretend that this node
			//has children; here, we'll indicate that 70% of nodes have
			//children.
			if (index>30) {
				//We'll use a random number to determine the number of
				//children for each node:
				var childCount = (Math.round(Math.random()*5) + 1);
				
				//This is important: The primary job of the data loader function
				//is to determine whether the node has children and then to 
				//actually create the child nodes if they are needed; here, we'll
				//loop through to create each child node:
				for (var i=0; i<childCount; i++) {
					thisState = aStates[Math.round(Math.random()*27)];
					var newNode = new YAHOO.widget.TextNode(thisState, node, false);
				}
			}
			
			//When we're done creating child nodes, we execute the node's
			//loadComplete callback method which comes in as our loader's
			//second argument (we could also access it at node.loadComplete,
			//if necessary):
			fnLoadComplete();
		}

        function buildTree() {
		   //create a new tree:
		   tree = new YAHOO.widget.TreeView("treeContainer");
		   
		   //turn dynamic loading on for entire tree:
		   tree.setDynamicLoad(loadNodeData, currentIconMode);
		   
		   //get root node for tree:
		   var root = tree.getRoot();
		   
		   //add child nodes for tree:
		   var tmpNode1 = new YAHOO.widget.TextNode("First Node", root, false);
		   var tmpNode2 = new YAHOO.widget.TextNode("Second Node", root, false);
		   var tmpNode3 = new YAHOO.widget.TextNode("Third Node", root, false);
		   var tmpNode4 = new YAHOO.widget.TextNode("Fourth Node", root, false);
		   var tmpNode5 = new YAHOO.widget.TextNode("Fifth Node", root, false);
		   
		   //render tree with these five nodes; all descendants of these nodes
		   //will be generated as needed by the dynamic loader.
		   tree.draw();
		}


	return {
		init: function() {
            YAHOO.util.Event.on(["mode0", "mode1"], "click", changeIconMode);
            var el = document.getElementById("mode1");
            if (el && el.checked) {
                currentIconMode = parseInt(el.value);
            } else {
                currentIconMode = 0;
            }

            buildTree();
        }

	}
} ();

YAHOO.util.Event.addListener(window, "load", YAHOO.example.treeExample.init, YAHOO.example.treeExample,true)
</script>
 

 

参照网址:http://www.java2s.com/Code/JavaScript/GUI-Components/DynamicTreeViewExample.htm

分享到:
评论

相关推荐

    关于yui的学习

    在源码层面,YUI的设计遵循模块化原则,通过YUI Loader组件可以动态加载所需的模块,实现了按需加载,从而减少了页面的初始加载时间。学习YUI源码有助于理解其内部机制,对于提升JavaScript编程技巧和优化代码性能有...

    YUI3 中tree的两种实现

    例如,你可以在`click`事件中执行异步加载子节点的数据,提高用户体验。 6. **性能优化** 在处理大量节点时,性能优化是关键。YUI3 TreeView支持虚拟化技术,只渲染当前可视区域内的节点,从而提高滚动性能。 7. ...

    YAHOO UI 树

    YUI包含了一系列的模块,如事件处理、动画效果、数据绑定、用户界面组件等,其中就包括了用于构建树形结构的组件——YUI TreeView。 **TreeView组件** 是YUI中的一个重要部分,它允许开发者在网页上展示层次化的...

    yui3-master.zip

    YUI3采用了模块化的设计理念,每个功能都被封装为独立的模块,开发者可以根据需要按需加载,降低了整体代码的体积,提高了页面加载速度。在“yui3-master.zip”中,我们可以看到不同模块的源代码文件,如“build”...

    YUI 详细说明文档

    - **YUI_config.listener**:允许开发者定义回调函数,当新的YUI组件被加载到页面时触发。 #### 二、YUI提供的Dom操作 YUI的DOM操作模块简化了对DOM树的操作,使得常见的DOM操作变得简单易行。 **2.1 Element的...

    yui 资源包

    5. **数据绑定**:YUI的数据绑定功能,让数据和视图之间的同步变得容易,减少了DOM操作,提高性能。 二、YUI的组件体系 1. **DOM操作**:YUI的Node和Selector模块提供了高效的DOM操作接口,包括选择、操作、遍历DOM...

    Ajax(yui-slideshow)

    1. **异步加载**:YUI Slideshow支持动态加载内容,可以使用Ajax技术加载下一张幻灯片的内容,减少页面初次加载时的数据量,提高页面响应速度。 2. **多种过渡效果**:提供多种动画过渡效果,如淡入淡出、滑动等,...

    yui.rar 例子

    YUI遵循了“按需加载”的原则,这意味着开发者可以根据应用需求只引入必要的模块,从而减少文件大小,提升加载速度。在“yui.rar”里,可能包含有如“yui-core”、“yui-dom”、“yui-event”等基础模块,这些模块...

    yuicompressor-2.4.8.jar

    2. 配置项目构建:在项目的构建配置中添加yuicompressor的任务,指定输入文件路径、输出文件路径以及压缩级别等参数。 3. 运行构建:保存配置后,执行构建操作,Idea会自动调用yuicompressor对指定文件进行压缩。 ...

    YUI3.7.3 最新版本 带API

    1. **模块系统**:YUI3引入了CommonJS风格的模块系统,允许开发者通过`YUI.use()`方法加载所需模块,实现按需加载,减少页面初始化时的加载量。 2. **事件处理**:YUI3提供了强大的事件系统,支持DOM事件、自定义...

    YUI3.6文档及示例

    模块可以通过`YUI.use()`方法来加载,实现了代码的异步加载和依赖管理。 2. **事件系统**:YUI的事件处理机制强大且灵活,支持DOM事件、自定义事件以及事件委托,使事件绑定和解绑变得简单易行。 3. **DOM操作**:...

    YUI-ajax框架开发文档

    通过查看提供的demo,开发者可以直观地了解如何在实际项目中应用YUI的Ajax功能,比如动态加载内容、无刷新更新页面等。 总之,YUI的Ajax框架为开发者提供了强大的工具,使他们能够轻松地构建动态、交互性强的Web...

    yui_3.8.1.zip

    1. **模块系统**:YUI 3.8.1采用CommonJS规范,通过YUI.use()方法按需加载模块,降低初始页面加载时间。此外,还支持AMD(异步模块定义)模式,适应不同的开发需求。 2. **事件处理**:YUI提供了一套完整的事件系统...

    YUi文档(中文的哦)

    所有使用YUI3的页面都需要包含这个核心模块,以便能够动态地加载所需的其他模块及其依赖项。 - **YUI实例**: 每个页面可以共享一个YUI实例,也可以根据需要使用多个实例。这提供了很大的灵活性。 - **加载机制**: ...

    yuicompressor-yui compressor

    yuicompressor-2.4.2.jar yuicompressor-2.4.7.jar jsZip.exe yuicompressor yui compressor js压缩工具 javascript压缩工具 css压缩工具 ------------------------------------ //压缩JS java -jar yui...

    YUI JS CSS 打包工具

    yuicompressor.reg 文件可能是注册表导入文件,用于将YUI压缩器相关的设置添加到Windows注册表中,以便于在命令行环境中快速调用。然而,谨慎使用这类文件,因为错误的操作可能会对系统造成影响。 lib 文件夹通常...

    YUI.rar_html_javascript YUI_yui_yui javascript

    1. **模块化设计**:YUI采用模块化的结构,允许开发者按需加载所需的组件,减少页面加载时间,提高性能。 2. **跨浏览器兼容性**:YUI经过精心设计,确保在主流浏览器上都能正常运行,包括IE、Firefox、Chrome、...

    【YUI组件】基于YUI的表单验证器

    这个表单验证器是YUI库中的一个关键部分,用于确保用户在提交表单时输入的数据符合预设的规则和格式,从而提高数据质量和应用的安全性。 **描述分析:** 描述中提到的“NULL”意味着没有提供额外的详细信息。不过...

    YUI2 库与例子都有了

    5. **数据(Data)**:YUI2支持数据绑定和模型-视图-控制器(MVC)架构,帮助开发者处理和展示数据,比如表格数据的动态加载和更新。 6. **动画(Animation)**:YUI2提供了强大的动画引擎,可以轻松实现平滑的过渡...

    《YUI使用文档》汉语版的yui学习材料

    `YUI_config.listener`允许定义自定义回调函数,当有新的YUI组件被加载时,该函数会被调用。 YUI的DOM操作是其强大之处。例如,`Dom.get`能根据ID获取元素,`Dom.getElementsBy`则通过用户定义的过滤函数查找符合...

Global site tag (gtag.js) - Google Analytics