Yahoo! User Interface Libraryの,TreeViewを使ってみた.

サンプルコード

以下はソースコードの例.

ダウンロードした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>

実行結果
yui_tv_02.png

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

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

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

treeview.jsのバグ

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

実行結果(バグ)
yui_tv_01.png

「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>タグを閉じていたという話.

kamolandをフォローしましょう


© 2019 KMIソフトウェア