ホーム サンプルコード一覧 12. Tree List

12. Tree List

treelist_capture1

実現される機能

ダウンロード

※ダウンロードファイル内に、ソースコードとともに以下のデモが同梱されています。

デモ

基本デモ

基本的なデモです

使用手順

1. 依存ライブラリの読み込み

Tree Listが依存する、以下のライブラリを読み込みます。

<script src="../../common/js/jquery.min.js"></script>
<script src="libs/underscore-min.js"></script>
<script src="libs/backbone-min.js"></script>
<script src="libs/jquery.ba-hashchange-custom.min.js"></script>
<script src="script.js"></script>

2. Tree Listのスクリプト読み込み

Tree Listのスクリプトを読み込みます。

<script src="script.js"></script>

3. Tree Listを配置するための要素を用意

ページ内に、Tree Listを配置するための要素と、戻るボタンを用意します。

<div class="jsonTree-list"></div>
<div class="jsonTreeView-backButton"><a href="#">戻る</a></div>

4. APIへのパスを指定

script.jsの上部にある以下の箇所に、JSONを返すAPIへのパスを指定します。

  //===========================================
  // config

  app.conf.path_api = 'data/tree.json'; // APIへのパスを指定

これで、APIが返す情報を元に、Tree Listが実現されます。

サーバーが用意するAPI

使用手順4にて、サーバーが返すデータは、以下の様な形式のJSONを想定しています。

{
  "items": [
    {
      "label": "A",
      "hash": "A",
      "items": [
        {
          "label": "A-1",
          "hash": 1,
          "items": [
            {
              "label": "A-1-1",
              "url": "/A/1/1/"
            },
            ...(繰り返し可)
          ]
        },
        ...(繰り返し可)
      ]
    },
    ...(繰り返し可)
  ]
}

このTree Listのサンプルでは、以下の形式のデータを基本的なデータモデルとします。

{
  "label": "A-1", // ナビゲーションテキスト
  "hash": 1, // 対応するhash
  "items": [ // 子アイテム群
    ...
  ]
}

このデータのitemsに、同じ形式のデータを入れることで、再帰的に階層化したナビゲーションを実現します。

終端のデータモデルは、以下の形式としています。

{
  "label": "A-1-1", // ナビゲーションテキスト
  "url": "/A/1/1/" // リンク先
}

このようなデータモデルは、href/A/1/1/が指定された、ただのリンクとなります。

終端に至るまでの道中のデータモデルに対応するナビゲーションは、そこまでの構造をhashとして表現した文字列がhrefに指定されるリンクとなります。これに対応する表示が、hashchange時およびページ表示時に、表示される仕組みとなっています。

より細かい設定方法

このスケルトンの見栄えの再現には、Bootstrapを利用しているため、Bootstrapで用意されているクラス名が、各要素に付加されています。これらを変更したい場合は、script.js内にて、コメントが付いている箇所を編集してください。