build yui treeview by json-CSDN博客

本文链接：https://blog.csdn.net/iteye_19636/article/details/81649962
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Menu-Style TreeView Design</title>

<style type="text/css">
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
	margin:0;
	padding:0;
}
</style>

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/treeview/assets/skins/sam/treeview.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/treeview/treeview-min.js"></script>

<!-- Dependencies -->
<script src="http://yui.yahooapis.com/2.6.0/build/yahoo/yahoo-min.js"></script>

<!-- Source file -->
<script src="http://yui.yahooapis.com/2.6.0/build/json/json-min.js"></script>

<!--begin custom header content for this example-->
<!--bring in the folder-style CSS for the TreeView Control-->
<link rel="stylesheet" type="text/css" href="http://developer.yahoo.com/yui/build/treeview/assets/treeview-menu.css" />

<!-- Some custom style for the expand/contract section-->
<style>
#expandcontractdiv {border:1px dotted #dedede; background-color:#EBE4F2; margin:0 0 .5em 0; padding:0.4em;}
#treeDiv1 { background: #fff; padding:1em; margin-top:1em; }
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Menu-Style TreeView Design</h1>

<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

<!-- markup for expand/contract links -->
<div id="expandcontractdiv">
	<a id="collapse" href="#">Collapse all</a>
</div>

<div id="treeDiv1"></div>

<script type="text/javascript">
//an anonymous function wraps our code to keep our variables
//in function scope rather than in the global namespace:
(function() {
	var tree; //will hold our TreeView instance

	function treeInit() {

		YAHOO.log("Example's treeInit function firing.", "info", "example");

		//Hand off ot a method that randomly generates tree nodes:
		buildRandomTextNodeTree();

		//handler for collapsing all nodes
		YAHOO.util.Event.on("collapse", "click", function(e) {
			YAHOO.log("Collapsing all TreeView  nodes.", "info", "example");
			tree.collapseAll();
			YAHOO.util.Event.preventDefault(e);
		});
	}

	//This method will build a TreeView instance and populate it with
	//between 3 and 7 top-level nodes
	function buildRandomTextNodeTree() {

		var jsonTree = '{"label":"all", "children":[';
				jsonTree +=	'{"label":"bar", "children":[';
					jsonTree += '{"label":"37628"},';
					jsonTree += '{"label":"quux", "children":[';
						jsonTree += '{"label":"179"},';
						jsonTree += '{"label":"7"}';
					jsonTree += ']},';
				jsonTree += '{"label":"1025"}';
				jsonTree += ']}';
			jsonTree += ']}';
			var jsonString = '{"label":"Level 1","children":[{"label":"Level 2-1"},{"label":"Level 2-2"}]}';
			var prod = YAHOO.lang.JSON.parse(jsonString); 
			var treeObject = YAHOO.lang.JSON.parse(jsonTree);
		//instantiate the tree:
		tree = new YAHOO.widget.TreeView("treeDiv1", treeObject);

		//create top-level nodes
		//for (var i = 0; i < Math.floor((Math.random()*4) + 3); i++) {
		//	var tmpNode = new YAHOO.widget.MenuNode("label-" + i, tree.getRoot(), false);

			//we'll delegate to another function to build child nodes:
		//	buildRandomTextBranch(tmpNode);
		//}

		//once it's all built out, we need to render
		//our TreeView instance:
		tree.draw();
	}

	//This function adds a random number <4 of child nodes to a given
	//node, stopping at a specific node depth:
	function buildRandomTextBranch(node) {
		if (node.depth < 6) {
			YAHOO.log("buildRandomTextBranch: " + node.index);
			for ( var i = 0; i < Math.floor(Math.random() * 4) ; i++ ) {
				var tmpNode = new YAHOO.widget.MenuNode(node.label + "-" + i, node, false);
				buildRandomTextBranch(tmpNode);
			}
		}
	}

	//When the DOM is done loading, we can initialize our TreeView
	//instance:
	YAHOO.util.Event.onDOMReady(treeInit);

})();//anonymous function wrapper closed; () notation executes function

</script>

<!--END SOURCE CODE FOR EXAMPLE =============================== -->


<!--MyBlogLog instrumentation-->
</body>
</html>