ツリー構造 表示

windowsのエキスプローラのような構造表示を行えるjQueryプラグイン「Dynatree」を試してみた。 サイトマップ表示などで使えるので忘れないよう記録しておく。

1.ダウンロード

次のサイトからDynatreeをダウンロードすることができる。
https://code.google.com/p/dynatree/

2.インストール

①次のjsファイルをサーバにアップロードする。
   jquery.min.js、jquery-ui.js、jquery.cookie.js、jquery.dynatree.js

②skinフォルダーにはcssとイメージファイルが含まれているので、このフォルダーごとサーバに
   アップロードする。

3.ツリー構造の設定

 ツリー構造をHTMLとJavaScriptを使って設定する。

<!DOCTYPE html>
<html lang="ja">
<HEAD>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<meta charset="UTF-8"> 
<meta http-equiv="Content-Script-type" content="text/javascript">
<script type="text/javascript" src="http://shiba-sub2.sakuraweb.com/js/jquery.min.js"></script>
<script type="text/javascript" src="http://shiba-sub2.sakuraweb.com/js/jquery-ui.js"></script>
<script type="text/javascript" src="http://shiba-sub2.sakuraweb.com/js/jquery.cookie.js"></script>
<link href="http://shiba-sub2.sakuraweb.com/css/skin/ui.dynatree.css" rel="stylesheet" type="text/css"> 
<script src="http://shiba-sub2.sakuraweb.com/js/jquery.dynatree.js" type="text/javascript"></script>
<TITLE>Tree構造</TITLE>
<style type="text/css">
</style>
</HEAD>
<body>
<div id="tree">
  <ul id="treeData">
     <li id="id1" class="folder">テレビ局
        <ul>
           <li id="id1.1">キー局
              <ul>
                 <li id="id1.1.1" data="url:'http://www.nhk.or.jp/'">HNK</li>
                 <li id="id1.1.2" data="url:'http://www.ntv.co.jp/'">日本テレビ</li>
                 <li id="id1.1.3" data="url:'http://www.tbs.co.jp/'">TBS</li>
                 <li id="id1.1.4" data="url:'http://www.fujitv.co.jp/index.html'">フジテレビ</li>
                 <li id="id1.1.5" data="url:'http://www.tv-asahi.co.jp/'">テレビ朝日</li>
                 <li id="id1.1.6" data="url:'http://www.tv-tokyo.co.jp/'">テレビ東京</li>
              </ul>
           </li>
           <li id="id1.2">ローカル局
              <ul>
                 <li id="id1.2.1" data="url:'http://s.mxtv.jp/'">東京メトロポリタンテレビジョン</li>
                 <li id="id1.2.2" data="url:'http://www.tvk-yokohama.com/'">テレビ神奈川</li>
                 <li id="id1.2.3" data="url:'http://www.chiba-tv.com/'">千葉テレビ</li>
              </ul>
           </li>
        </ul>
     </li>
     <li id="id2" class="folder">ニュース
        <ul>
           <li id="id2.1" data="url:'http://www.asahi.com/'">朝日新聞</li>
           <li id="id2.2" data="url:'http://www.yomiuri.co.jp/'">読売新聞</li>
           <li id="id2.3" data="url:'http://mainichi.jp/'">毎日新聞</li>
        </ul>
     </li>
     <li id="id3" class="folder">検索サイト
        <ul>
           <li id="3.1" data="url:'http://www.yahoo.co.jp/'">Yahoo!</li>
           <li id="3.2" data="url:'http://www.google.com/webhp?hl=ja'">Google</li>
           <li id="3.3" data="url:'http://www.goo.ne.jp/'">Goo</li>
           <li id="3.4" class="folder">ファイル
              <ul>
                <li id="id3.4.1">子ファイル1</li>
                <li id="id3.4.2">子ファイル2</li>
                <li id="id3.4.3">子ファイル3</li>
              </ul>
           </li>
        </ul>
     </li>
  </ul>
</div>
<script type="text/javascript">
var tree = $("#tree").dynatree({
  // clickFolderMode フォルダクリック時の挙動を指定。
  // 1:アクティブ, 2:展開, 3:アクティブ+展開  デフォルトは3。
  clickFolderMode: 3, 
  // fx ノードの展開エフェクトを指定
  fx: { height: "toggle", duration: 200 }, 
  // debugLevel デバッグレベルを指定。 0:quiet, 1:normal, 2:debug 
  // デフォルトは1、初期化時にコンソールに情報が出力されるので気になる場合は0を指定。 
  debugLevel: 0,
  onActivate: function(node) {
    if( node.data.url )
      window.open(node.data.url);
    $("#echoActive").text(node.data.title);
  },
  onDeactivate: function(node) {
    $("#echoActive").text("-"); 
  }
});
</script>
</body>
</HTML>
Dynatreeの設定サンプル