动态加载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