またもや良さげなやーつー発見。

dynatree

かなり豊富なAPIとメソッドを持っているため、出来ないことはほぼない。自分的にはAjaxを用いた遅延読み込みが出来ればおなか一杯大満足である。

ドキュメントは下記URLを参照。

http://wwwendt.de/tech/dynatree/doc/dynatree-doc.html

案の定いきなりドキュメントを読み始めても途方に暮れたので、念のため雛形をメモ。

■HTML

<div id="tree"></div>

■Javascript

$("#tree").dynatree({
	// 初回読み込み時のファイルツリー読込メソッド
	initAjax: {
		url: '/path/to/parentNode.json'
	},
	// isLazyが有効なノードが展開された際に実行
	onLazyRead: function(node) {
		node.appendAjax({
			url: /path/to/childrenNode.json,
		});
	},
	// ノードが選択した際に実行
	onActivate: function(node) {
		console.log(node.getKeyPath());
	},
});

読込先のノードに指定したURLは下記のようなJSON配列を返すように記述しておけばおｋ。

[
{"title" : "fileName", "isLazy" : false, "key" : "hogehoge"},
{"title" : "FolderName", "isFolder" : true, "isLazy" : true, "key" : "piyopiyo"}
]

node.getKeyPath()は各ノードに登録されたキーパスを取得してくれるメソッド。

これだけ書けてれば基本的なファイルツリーの実装には困らないはず。
更なる詳細は公式ドキュメントを参照されたし。