JavaScriptで階層構造(TreeView) - プログラマー'sペイジ

差分表示

最後の更新で追加された行はこのように表示します。
最後の更新で削除された行は~~このように~~表示します。
Yahoo! User Interface Libraryの，TreeViewを使ってみた．

-&link(Yahoo! User Interface Library,http://developer.yahoo.com/yui/index.html) / &link(TreeView,http://com2.devnet.scd.yahoo.com/yui/treeview/)

//parent=JavaScript
//parent=Ajax，JavaScript

*サンプルコード
以下はソースコードの例．

ダウンロードしたJSのうち，YAHOO.js，treeview.jsをインクルードしている．

何をやっているかというと，変数all_nodesに階層構造を定義しておいて，それを元にHTMLNodeを生成してTreeViewに追加している．

 <script type="text/javascript" src="js/YAHOO.js" ></script>
 <script type="text/javascript" src="js/treeview.js" ></script>
 <script type="text/javascript">
 function initTree(cnodes, node) {
     var lastNode;
     var i;
     for (i = 0; i < cnodes.length; i++) {
         if (typeof(cnodes[i]) == "object") {
             lastNode.expand();
             initTree(cnodes[i], lastNode);
         } else {
             lastNode = new YAHOO.widget.HTMLNode("&nbsp;" + cnodes[i], node, false, true);
         }
     }
 }
 </script>
 <link rel="stylesheet" type="text/css" href="css/folders/tree.css">
 <div>
 <a href="javascript:tree.expandAll()">[全てを展開]</a>
  <a href="javascript:tree.collapseAll()">[全てを折り畳む]</a>
 </div>
 <div id="treeDiv"></div>
 <script type="text/javascript">
 
 // ★★ ここから階層構造の定義部分 ★★
 var all_nodes = new Array(
     'FrontPage',
     new Array(
         '<a href="http://www.rensa.info/wiki/wiki.cgi?AI%2dCOM%a4%c8%a4%cf%a1%a9" title="AI-COMとは？">AI-COMとは？</a> - * AI-COMとは',
         '<a href="http://www.rensa.info/wiki/wiki.cgi?BugTrack" title="BugTrack">BugTrack</a> - ** バグ，新機能への要望',
         new Array(
             '<a href="http://www.rensa.info/wiki/wiki.cgi?BugTrack%2f1" title="BugTrack/1">BugTrack/1</a> - *お邪魔ぷよにぷよがめり込む，ぷよが分離する',
             '<a href="http://www.rensa.info/wiki/wiki.cgi?BugTrack%2f8" title="BugTrack/8">BugTrack/8</a> - *オジャマが下からせりあがってくるルール',
             '<a href="http://www.rensa.info/wiki/wiki.cgi?BugTrack%2f9" title="BugTrack/9">BugTrack/9</a> - *消す位置が高いほど攻撃力が上がるルール'
         ),
     '<a href="http://www.rensa.info/wiki/wiki.cgi?InterWikiName" title="InterWikiName">InterWikiName</a> - InterWiki用のサーバリストです。',
     '<a href="http://www.rensa.info/wiki/wiki.cgi?MenuBar" title="MenuBar">MenuBar</a> - *** れんさWikiメニュー'
     )
 );
 // ★★ ここまで階層構造の定義部分 ★★
 
 var tree = new YAHOO.widget.TreeView("treeDiv");
 initTree(all_nodes, tree.getRoot());
 tree.draw();
 </script>

実行結果~
&ref(yui_tv_02.png,100%,left)

実際に動いている様子は，[[階層一覧]]で見ることができる．(自作の[[pagetreeプラグイン>Plugin/pagetree]]に組み込んでいます)

なお，今回使ったHTMLNode以外にTextNodeというのも使えて，扱いはそっちの方が簡単なのだが，表示内容に結構制約がある．

HTMLNodeだと各ノードの表示内容をHTMLで直接指定できるので，まぁ何でもありだ．ただし以下のバグに注意．．．

*treeview.jsのバグ
ダウンロードしたtreeview.jsはバグっていて，そのまま実行すると以下のような変な画面になる．

実行結果(バグ)~
&ref(yui_tv_01.png,100%,left)

「onmouseover=」などという不審な文字列が，画面に表示されている．．．

仕方がないので，treeview.jsを自分で修正した．

修正前 (treeview.js :1301～1315行目)
    if (this.hasIcon) {
        sb[sb.length] = '<td';
        sb[sb.length] = ' id="' + this.getToggleElId() + '"';
        sb[sb.length] = ' class="' + this.getStyle() + '"';
        sb[sb.length] = ' onclick="javascript:' + this.getToggleLink() + '">&nbsp;';
        if (this.hasChildren(true)) {
            sb[sb.length] = ' onmouseover="this.className=';
            sb[sb.length] = 'YAHOO.widget.TreeView.getNode(\'';
            sb[sb.length] = this.tree.id + '\',' + this.index +  ').getHoverStyle()"';
            sb[sb.length] = ' onmouseout="this.className=';
            sb[sb.length] = 'YAHOO.widget.TreeView.getNode(\'';
            sb[sb.length] = this.tree.id + '\',' + this.index +  ').getStyle()"';
        }
        sb[sb.length] = '</td>';
    }


修正後 (treeview.js :1301～1319行目)
    if (this.hasIcon) {
        sb[sb.length] = '<td';
        sb[sb.length] = ' id="' + this.getToggleElId() + '"';
        sb[sb.length] = ' class="' + this.getStyle() + '"';
        // 2006.05.11 kamoi
 //      sb[sb.length] = ' onclick="javascript:' + this.getToggleLink() + '">&nbsp;';
        if (this.hasChildren(true)) {
            sb[sb.length] = ' onmouseover="this.className=';
            sb[sb.length] = 'YAHOO.widget.TreeView.getNode(\'';
            sb[sb.length] = this.tree.id + '\',' + this.index +  ').getHoverStyle()"';
            sb[sb.length] = ' onmouseout="this.className=';
            sb[sb.length] = 'YAHOO.widget.TreeView.getNode(\'';
            sb[sb.length] = this.tree.id + '\',' + this.index +  ').getStyle()"';
        }
        // 2006.05.11 kamoi
        sb[sb.length] = ' onclick="javascript:' + this.getToggleLink() + '">&nbsp;';
 
        sb[sb.length] = '</td>';
    }

要は，onmouseoverの属性を追加する前に，<td>タグを閉じていたという話．