http://d.hatena.ne.jp/nakamura001/20080516/1210952168
こちらのエントリーに続き、次は複数のノードを表示させるサンプルです。
1. 前回のエントリー部分の話は省略するため
こちらのHTMLファイル(treeview02.html)をベースに話を進めます。
※文字コードはUTF-8です。
<!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>TreeView01</title> <!-- css --> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.1/build/treeview/assets/skins/sam/treeview.css"> <!-- js --> <script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/yahoo/yahoo-min.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/event/event-min.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/treeview/treeview-min.js"></script> </head> <body class="yui-skin-sam"> <div id="treeDiv1"></div> <script type="text/javascript"> (function() { var tree; function treeInit() { tree = new YAHOO.widget.TreeView("treeDiv1"); var root = tree.getRoot(); tree.draw(); } YAHOO.util.Event.onDOMReady(treeInit); })(); </script> </body> </html>
2. 以下の部分にノードの追加処理を記述。
var root = tree.getRoot(); var tmpNode = new YAHOO.widget.TextNode("mylabel1", root, false); var tmpNode2 = new YAHOO.widget.TextNode("mylabel1-1", tmpNode, false);
YAHOO.widget.TextNode("mylabel1-1", tmpNode, false);
このように記述することで「mylabel1」の子ノードとして「mylabel1-1」を追加します。