ディレクトリを開閉可能なツリー形式で表示します。利用頻度は多くないですが、意外と難易度も高く時間がかかるので、実装サンプルを残しておきます。完成品のイメージは以下の GIF 画像を確認ください。
配列の作成
出力に必要な配列を組み立てます。ディレクトリ構造をツリー形式で出力するので、対応した配列をディレクトリから再帰的に取得します。
以下のクラスは { [フォルダ名] => 'ファイル名' } のような形式で配列を作成することができます。
FileReader.php
上記のクラスを使って出力した結果です。これをツリー形式で画面に出力します。
出力
リストタグを使ってツリーを組み立てます。配列を取得した時と同じ要領で出力します。
ここまでで一旦出力を確認してください。リストタグがツリー形式で出力されていれば成功です。
開閉
開閉動作を実装します。JavaScript を組む前に作ったリストに onclick 属性を付与します。
JavaScript で show 関数を実装します。
これで完成です。動作を確認して開閉可能なツリー形式になっていることを確認してください。
コメント
コメントを投稿