ツリー表示 JavaScript 「dTree」詳解

ツリー表示 JavaScript 「dTree」詳解

Posted at June 26,2007 2:27 AM
Tag:[dTree, JavaScript]

dTree によるサブカテゴリーリスト for Movable Type」で紹介した dTree の詳細について、本エントリーにて紹介します。

サンプル
dTreeのサンプルへ

例えば、上のスクリーンショットはエクスプローラー風のツリー表示ですが、設定によってはエクスプローラー風以外のツリー表示も可能です。

内容は概ね配布サイトの説明を訳したものですが、一部、使用した観点でも記しています。

1.コンフィグレーション

下記の項目を事前に設定しておくことで、dTree の動作や表示をカスタマイズすることができます(具体的な設定の流れは3項参照)。いくつかの項目については配布元の Example のページで確認できます。

変数名デフォルト値説明
targetStringtrue全てのノードの target 属性
folderLinksBooleantruetrue の場合、フォルダ名が通常のリンクになり、false の場合は(フォルダのみ)折りたたみ用リンクになります。
useSelectionBooleantruetrue の場合、選択したノードがハイライト表示されます。
useCookiesBooleantrueツリーの状態保持のためにクッキーを使用
useLinesBooleantruetrue の場合、ツリーを表示します。
useIconsBooleantruetrue の場合、アイコンを描画します。false の場合、「+」と「-」のシンプルなアイコンだけが表示されます。ルートノードのアイコンを非表示にしたい場合はこの設定がお勧め。
useStatusTextBooleanfalsetrue の場合、ステータスバーにURLの代わりにカテゴリー名を表示します(ブラウザ依存)
closeSameLevelBooleanfalsetrue の場合、あるノードを開いた時に、他の同一階層ノードを閉じます。また、openAll() と closeAll() は機能しません。
inOrderBooleanfalse親ノードが常に子ノードより先に add される場合、ツリーのスピードアップをする(注:動作未確認です)

設定例:

mytree.config.target = "mytarget";
mytree.config.useCookies = true;

2.API

add()

概要
ツリーにノードを追加します。ツリーを描画する前に起動してください。id, pid と name は必須です。
パラメータ
名前説明
idNumberツリーの中でユニークな番号
pidNumber参照する親ノード番号。ルート番号は「-1」。
nameStringノード名
urlStringノードの URL
titleStringノードの title 属性
targetStringノードの target 属性
iconStringアイコンを使用する場合の画像ファイル名。設定しない場合はデフォルト画像が使用される。
iconOpenStringアイコン(オープンした時)を使用する場合の画像ファイル名。設定しない場合はデフォルト画像が使用される。
openBooleanノードを開いて表示
例:
mytree.add(1, 0, 'My node', 'node.html', 'node title', 'mainframe', 'img/musicfolder.gif');

openAll()

概要
全てのノードを開きます。ツリー表示前後どちらでも起動できます。
例:
mytree.openAll();

closeAll()

概要
全てのノードを閉じます。ツリー表示前後どちらでも起動できます。
例:
mytree.closeAll();

openTo()

概要
指定したノードを開くことができます。ツリーが表示された後で起動してください。
パラメータ
名前説明
idNumberノード番号
selectBoolean開いたノードをハイライト表示する
例:
mytree.openTo(4, true);

3.サンプルコード

a = new dTree('a');
a.config.useCookies=false;
a.add(0,-1,'Tree example','javascript: void(0);');
a.add(1, 0,'Node 1','javascript:void(0);');
a.add(2, 1,'Node 2','javascript:void(0);');
a.add(3, 0,'Node 3','javascript:void(0);');
a.add(4, 1,'Node 4','javascript:void(0);');
a.add(5, 2,'Node 5','javascript:void(0);');
a.add(6, 4,'Node 6','javascript:void(0);');
a.add(7, 6,'Node 7','javascript:void(0);');
a.add(8, 6,'Node 8','javascript:void(0);');
a.add(9, 4,'Node 9','javascript:void(0);');
a.add(10, 3,'Node 10','javascript:void(0);');
a.add(11, 1,'Node 11','javascript:void(0);');
a.add(12, 1,'Node 12','javascript:void(0);');
a.add(13, 8,'Node 13','javascript:void(0);');
a.add(14, 11,'Node 14','javascript:void(0);');
document.write(a);

1行目:dTree オブジェクトを生成します。この行は必須です。

a = new dTree('a');

2行目:コンフィグレーションの設定です。ここではクッキーを有効にしています。

a.config.useCookies=false;

3行目:ルートノードの設定です。この行も必須のようです。

a.add(0,-1,'Tree example','javascript: void(0);');

4行目:ノード追加です。パラメータの数字は、自ノード番号「1」で、ルートノード(0)に属することを意味します。

a.add(1, 0,'Node 1','javascript:void(0);');

もうひとつ例を挙げると、16行目の

a.add(13, 8,'Node 13','javascript:void(0);');

は、8番のノードに属することを指しています。

18行目:ツリーを表示します。document.write 以外に innerHTML もOKでした。

document.write(a);

4.CSS

設定されているスタイルは下記の通りです。

.dtree {}
.dtree img {}
.dtree a {}
.dtree a.node, .dtree a.nodeSel {}
.dtree a.node:hover, .dtree a.nodeSel:hover {}
.dtree a.nodeSel {}
.dtree .clip {}
関連記事
zenback
人気エントリー
トラックバックURL


コメント

はじめまして。
こちらで紹介されたツリーを使わせてもらっています。
初心者でもわかりやすくて、とても助かっています。

質問なのですが、
ツリーを最初から展開された状態で表示するためには
どうすれば良いでしょうか?

よろしくお願いします。

[1] Posted by はりねずみ : October 25, 2008 3:33 PM

>はりねずみさん
こんばんは。
ご質問の件ですが、3項のサンプルコードを例にすれば、多分次のように書けば大丈夫だと思います。

…前略…
document.write(a);
a.openAll();

それではよろしくお願い致します。

[2] Posted by yujiro logo : October 26, 2008 12:36 AM

始めまして。

質問ですが、
こちらのサイトのRecent Commentsのコメントリストも
dtreeを使用されているのでしょうか。

必ず開いた状態で、アイコン等を何も表示しないように
できるのでしょうか。

[3] Posted by taka : December 4, 2009 10:04 PM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)