ツリーコントロールを使ってみる。

Yahoo! UI Libraryのツリーコントロールを使ってみます。

インストール

Yahoo! UI Libraryからライブラリをダウンロードします。(ver 2.2.2を使用しました。)
zipアーカイブを展開し、build/<パッケージ名?>以下にある必要なファイルをコピーして使用します。ツリーで必要なjsファイルは次の3つです。なお、"*-min", "*-debug"、サフィックスなしの3つがあります。このうち"*-min"は不要な空白等が除去された、ファイルサイズ圧縮版みたいです。("-debug"は未調査。)
- build/treeview/treeview-min.js
- build/event/event-min.js
- build/yahoo/yahoo-min.js
また、build/treeview/assetsに画像リソースとCSSファイルがあります。これも使わせていただきました。

基本的な使い方

YAHOO.widget.TreeViewを作成する。
YAHOO.widget.HTMLNodeなどを使用して、ツリーにノードを付加する。
tree.draw() でツリーを描画する。

以下は単純なサンプルです。

// ツリーを挿入するエレメント
var treeElm = document.getElementById("tree");

// TreeViewを作成。
var tree = new YAHOO.widget.TreeView(treeElm);

// ツリーにノードを追加。
var node = new YAHOO.widget.HTMLNode("Mike", tree.getRoot(), true, true);
new YAHOO.widget.HTMLNode("mii", node, false, true);
new YAHOO.widget.HTMLNode("kuro", node, false, true);

node = new YAHOO.widget.HTMLNode("Egyptian", tree.getRoot(), true, true);
new YAHOO.widget.HTMLNode("shiro", node, false, true);

new YAHOO.widget.HTMLNode("tora", tree.getRoot(), false, true);

// 描画
tree.draw();

確認はこちらから。

ノードを開いたときに子ノードを作る。

ノードを開いた時に動的にデータをロードし、子要素を生成するには、Node#setDynamicLoadを使用します。

// ツリーを挿入するエレメント
var treeElm = document.getElementById("tree");

// TreeViewを作成。
var tree = new YAHOO.widget.TreeView(treeElm);
var node = new YAHOO.widget.HTMLNode("Mike", tree.getRoot(), false, true);

// DynamicLoadを使用してツリーにノードを追加。
// ノードを開いたタイミングで以下の関数が実行され、子要素が生成される。
node.setDynamicLoad( function ( parentNode, onCompleteCallBack ) {
    try {
        // ノードを作る。
        // 引数として親のノードが渡されるのでそれを使う。
        new YAHOO.widget.HTMLNode("mii", parentNode, false, true);
        new YAHOO.widget.HTMLNode("kuro", parentNode, false, true);
    } finally {
        // 子ノードの作成が完了したら、コールバック関数を実行し、作成終了を明示する。
        onCompleteCallBack();
    }
});

// 描画
tree.draw();

確認はこちらから。