5.3. ツリービュー
この章では、JavaScript UI コンポーネントを使用し、エクスプローラ風のツリービューを組み込む手順について説明します。
JavaScript ファイルを読み込む
HTMLテンプレートのHEAD部にて、JavaScriptファイル「 treeview.js 」を読み込みます。
※本コンポーネントを使用する際は、「 prototype.js 」が必須です。
<head>
  <!-- prototype.jsの読み込み -->
  <script language="javascript" type="text/javascript"
            src="js/prototype/prototype_1_6_0.js"></script>
  <!-- treeview.jsの読み込み -->
  <script type="text/javascript" src="ls/treeview.js"></script>
</head>
ツリーを構成するコンテンツを記述する
「 UL・LI 」タグをネストすることで、ツリー構成が可能になります。
<div id="EmpTree" class="lsTreeView">
第 1 階層
  <ul>
    <li>
        <span class="lsTreeViewToggle">-</span>すべて
第 2 階層
        <ul>
            <li>
              <span class="lsTreeViewToggle">+</span>営業部
第 3 階層
              <ul>
                <li><a href="…">タマ</a></li>
                <li><a href="…">フグ田サザエ</a></li>
                <li><a href="…">フグ田タラオ</a></li>
              </ul>
            </li>
            <li>
              <span class="lsTreeViewToggle">+</span>開発部
              <ul>
                <li><a href="…">ハチ公</a></li>
                <li><a href="…">伊佐坂甚六</a></li>
              </ul>
            </li>
        </ul>
    </li>
  </ul>
</div>

展開・折りたたみ

「 LI 」タグの直下に「 SPAN 」タグ（ lsTreeViewToggle クラス）で 「 + / - 」を記述し、続けて「 UL・LI 」タグにより配下の階層を記述します。「 - 」の場合、初期表示時に展開された状態となります。
※「 + / - 」以外の文字は、後述するオブジェクトの作成処理で指定することも可能です。
画面表示時のオブジェクト作成処理を記述する
HTML テンプレート の BODY 部の最後で、ツリービューの作成処理を行います。
<body>
  …
  <script type="text/javascript"><!--
      // ツリーオブジェクトを生成
      tv = new ls.TreeView(
                     'EmpTree',
                    {expanded:'+', collapsed:'-',
                      onExpand:onItemExpand, onCollapse:onItemCollapse}
                    );
  // --></script>
</body>

作成処理

画面のロード時に、「 ls.TreeView 」オブジェクトを作成します。
第1パラメータにはツリーを構成する「 DIV 」タグの ID を指定します。
第2パラメータでは連想配列で、以下の内容を指定します。
  • expanded：展開可能な状態を示す文字（指定なしの場合「 + 」）
  • collapsed：折り畳み可能な状態を示す文字（指定なしの場合「 - 」）
  • onExpand：展開時に呼び出すJavaScript関数名（指定なしの場合、関数の実行は無し）
  • onCollapse：折り畳み時に呼び出すJavaScript関数名（指定なしの場合、関数の実行は無し）

※「 onExpand / onCollapse 」を使用して関数の呼び出しを行う場合は、HEAD 部にて、指定した名称の JavaScript 関数を定義してください。
ページを表示する
ツリーの展開・折りたたみが行えることを確認します。