ツリーリスト

ツリーリストは、論理的階層構造をもつ要素のリストを階層化して表示する機能をもつ。

本機能は、テーブルやプルダウンリストを含む、任意の要素リストを階層化して表示することができる。 各階層はアイコンをクリックすることで開閉することができる。 また、階層の状態はサブミット時に送信される。 このため、ウィンドウスコープと併用すれば、画面遷移間で階層の状態を維持することができる。

階層構造の定義 ツリーリスト内の各要素はid属性値の値に従って階層化される。 ユーザIDや商品コードの体系に論理的な階層構造が存在している場合は、その値をid属性に出力する ことにより、階層表示が可能となる。

また、コードが正規化されていて、親コードと明細コードに分離している場合は、それらを連結した値を id属性に出力すればよい。

階層構造の定義は、文字数による分割、区切り文字による分割のいずれかの方法で行う。

階層操作 親項目の先頭部分に開閉処理を行うアイコンが追加される。 これをクリックすることで、子階層の表示・非表示を切り替えることができる。 また、各要素上のチェックボックス・ラジオボタンの内容を一括操作するコントロール(リンクorボタン)を 追加することが可能である。

マークアップ仕様

階層構造の定義 リストとなる要素にマーカCSSクラス nablarch_TreeList を指定する。 また、リスト上の各要素に nablarch_ListItem を指定する。

以下は、テーブル内の各行をid属性値でソートし、階層表示する例である。

<table class="nablarch_TreeList
              -name       formdata.treeListState
              -hierarchy  chars:4|2|2|2
              -items      tr:has(td)
              -navigation td:first">
...
</table>

このウィジェットに指定するオプションは以下の5つである。

-name (属性値): 各階層の開閉状態を保持するフォーム要素のname属性値。 基本的に任意の文字列で構わないが 開閉状態を画面遷移間で保持するには適切なウィンドウスコーププレフィックスから 開始させる必要がある。

-hierarchy (階層定義式): 各要素の階層構造を定義する方法。 以下の3つの書式のうち、いずれかの方法で指定する。

1. chars:(数値)|(数値)|...|(数値)
  各要素のid属性値を先頭からの文字数で分割し階層を決定する方法。

2. separator:(区切り文字列)
  各要素のid属性値を区切り文字列で分割し階層を決定する方法。

-depth (整数値): 階層の深さを指定する。

-items (セレクタ式): ツリー表示の対象要素を指定するセレクタ式 例えば、"#table1 tr:has(td)" のように指定した場合は、テーブル内の各<tr>タグが 対象となる。 (has(td) としているのは、ヘッダー行(th)を除外するため。)

-navigation (セレクタ式): 各要素内でツリーの開閉を行うアイコンを挿入する要素を指定するセレクタ式。 例えば、td:first とした場合は各<tr>要素の先頭列に開閉用のアイコンを挿入する。

階層の操作 階層を操作するための要素(input:checkboxタグ)に以下のマーカCSSクラスを指定する。

toggleAll チェックボックスまたはラジオボタンの全選択/全解除を行う事を表すクラス。

<td colspan="2">階層名</td>
<td class="check">
  <input class="toggleAll
        -name  formdata.availableRequestIds
        -value ${row.id}"
        type="checkbox"
        name="formdata.availableRequestIds"
        value="${row.id}" />
</td>

ここで指定するオプションは以下の2つである。

-name (属性値): 操作対象のチェックボックスまたはラジオボタンのname属性値。

-value: 操作対象のチェックボックスまたはラジオボタンのvalue値(先頭一致)。 ここで設定した値で開始されるvalue属性を持つチェックボックスまたはラジオボタンが操作対象となる。