Dynamic TreeView Example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><!--Yahoo! User Interface Library: http://twiki.corp.yahoo.com/view/Devel/PresentationPlatform--><!--Begin YUI CSS infrastructure, including Standard Reset, Standard Fonts, and CSS Page Grids -->
<link rel="stylesheet" type="text/css" href="./build/fonts/fonts.css">
<link rel="stylesheet" type="text/css" href="./build/grids/grids.css"><!--end YUI CSS infrastructure--><!--begin YUIL Utilities -->
<script src="./build/yahoo/yahoo.js"></script>
<script src="./build/event/event.js"></script>
<script src="./build/treeview/treeview.js"></script>
<link rel="stylesheet" type="text/css" href="./examples/treeview/css/code.css">
<link rel="stylesheet" type="text/css" href="./examples/treeview/css/local/tree.css">
<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>
<title>Dynamic TreeView Example</title>
</head>
<body id="yahoo">
<!-- id: optional property or feature signature -->
<div id="doc" class="yui-t5"><!-- possible values: t1, t2, t3, t4, t5, t6, t7 -->
<div id="hd">
<h1>TreeView Example</h1>
</div>
<div id="bd">
<!-- start: primary column from outer template -->
<div id="yui-main">
<div class="yui-b">
<p>In
this example, the TreeView control's dyamic loading functionality is
explored. Dynamic loading of child nodes allows you to optmize
performance by only loading data for and creating the nodes that will
be visible when the tree is rendered. Nodes that are not expanded when
the Tree's draw method is invoked are left childless in the initial
state. When such a node is expanded (either by user action or by
script), a dynamic loader function is called. That function has three
important roles:</p>
<ol>
<li><strong>Check for child nodes:</strong>
The dynamic loader function will check for child nodes by evaluating
in-page data (for example, data held in a JavaScript array or object)
or by retrieving data about the expanding node from the server via
XMLHttpRequest. In the example on this page, an in-page random list
generator is used to generate the Tree structure. </li>
<li><strong>Add child nodes, if present:</strong>
If it determines that child node's are present for the expanding node,
the dynamic loader must add those child nodes to the Tree instance.
Because these nodes are only added when needed, the overall complexity
of the Tree's complexity (in JavaScript and in the DOM) is reduced and
its initial render time is much faster.</li>
<li><strong>Invoke the expanding node's callback method:</strong>
Once the dynamic loader method determines whether the expanding node
has children (and adds any children that may be present), it must
notify the expanding node's object that dynamic loading is complete. It
does this via a callback method which is passed into the dynamic loader
as an argument.</li>
</ol>
<h3>Creating a Dynamic Loader Method</h3>
<p>In
this example, our dynamic loader method will accomplish its first task
(checking for child nodes) by using a random number generator; we'll
specify that roughly 70% of our nodes have children. When there are
children present, there will be children will between one and six
children (also randomly enumerated) whose labels are drawn from an
array of Indian states.</p>
<p>Our method, which we'll call <code>loadNodeData</code>, will be
passed two arguments by the Tree instance when called: The first is a
reference to the expanding node's node object; the second is the
callback method that we need to call when we're done adding children to
the expanding node. The method as it appears on this page (only the
array of state names has been truncated) follows, with comments
glossing each step:</p>
<pre><textarea name="code" class="JScript" cols="60" rows="1">loadNodeData: function(node, fnLoadComplete) {
//Array of India's States
var aStates = ["Andhra Pradesh",
"Arunachal Pradesh","Assam",
...
];
//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();
}</textarea></pre>
<h3>Setting Up the Tree Instance and Configuring It for Dynamic Loading</h3>
<p>Creating
the initial state of a Tree object that will be configured for dynamic
loading is no different than for non-dynamic Tree instances — use the
Tree constructor to create your new instance:</p>
<pre><textarea name="code" class="JScript" cols="60" rows="1">//create a new tree:
tree = new YAHOO.widget.TreeView("treeContainer");</textarea></pre>
<p>In the example on this page, the entire tree is configured for
dynamic loading. That will result in all nodes having their children
populated by the dynamic loader method when they are expanded for the
first time. (You can also choose to specify individual nodes and their
descendants as being dynamically loaded.) To the Tree instance for
dynamic loading, merely pass the instance's <code>setDynamicLoad</code> method a reference to your dynamic loader method:</p>
<pre><textarea name="code" class="JScript" cols="60" rows="1">//turn dynamic loading on for entire tree:
tree.setDynamicLoad(this.loadNodeData);
</textarea></pre>
<p>Having created a Tree instance and configured it for dynamic
loading, we can now add the tree's top-level nodes and then render the
Tree via its <code>draw</code> method:</p>
<pre><textarea name="code" class="JScript" cols="60" rows="1">//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();
</textarea></pre>
<p>With that, our tree renders on the page, showing its five top-level
nodes. As the user interacts with the tree, child nodes will be added
and displayed based on the output of the <code>loadNodeData</code> method.</p>
<h3>Childless Node Style</h3><p>There are two built-in visual treatments for
childless nodes. Before a dynamically loaded node is expanded, its icon
indicates that it can be expanded — this reflects the possibility that
the dynamic loader will find and populate children for that node if it is
expanded. However, once the Tree determines that a node has no children, it
can reflect the childless state either through the "expanded" icon (<img
src="">) or by omitting the icon entirely. In this example, we've
added a control that enables you to experiment with each setting to explore its
visual impact</p><p>The default visual treatment for a childless node is the
"expanded" icon. To change this setting, pass a second argument to your
<code>setDynamicLoad</code> method — pass a value of <code>1</code> to
use the iconless visual treatment.</p> </div> </div> <!-- end: primary column
from outer template -->
<!-- start: secondary column from outer template --> <div
class="yui-b"> <h3>Dynamically Loaded TreeView:</h3> <div
id="treeContainer"></div> <h3>Childless Node Style:</h3> <dd> <label>
<input type="radio" id="mode0" name="mode" value ="0" checked />
Expand/Collapse </label> </dd> <dd> <label> <input type="radio"
id="mode1" name="mode" value ="1" /> Leaf Node </label> </dd> </div>
<!-- end: secondary column from outer template -->
</div> <div id="ft"> </div> </div> <script
src="./examples/treeview/js/dpSyntaxHighlighter.js"></script> <script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code'); </script> </body></html>
yui.zip( 3,714 k)Related examples in the same category