jQuery File Treeを使ってみた

いくつかの件でjQuery File Treeを使ってみたので感想などを。


非常によく出来たスクリプトで、ファイルツリーだけでなく、階層構造を持ったデータにも十分に使える。
加えて良いのが、コネクタ(ファイルリストを返すサーバサイドスクリプト)がPHP/Ruby/JSP/Perl/Python等、最初からいくつも用意されているので、設置も修正も容易な事だ。表示したくないデータや、必ず表示するデータの修正、擬似的な階層構造を表示させたい場合にも非常に楽に操作が行える。

今まで利用したケースとしては、ディレクトリの操作や、カテゴリリストなどだった。

残念な点としては、ディレクトリやファイルのリストをコネクタ側でHTMLとしてAjaxJavaScriptに返すので、MVCを分けた管理がされていないという点だろうか。ただし、この修正はAjaxでの戻りをJSONで返せば良いだけなので、あまり気にする必要もないかも知れない。

また、これはブラウザ側の問題かと思われるが、WebKitを使ったブラウザ(SafariChrome)では、若干表示が崩れてしまう事がある。これも今のシェアから考えれば、それほど気にする必要もないかも知れないが。


以下は使った時に気になった点なので、用途にもよると思う。

  • フォルダやファイルをマウスのドラッグなどで移動はできない。なので、各項目をクリックした後に、各種アクションボタンをクリックするような動作にする事になった。
  • ディレクトリに対してアクションを起こす場合は、フォルダを開くアクションをダブルクリックにしておくと便利かも知れない。でなければ、2度目のクリックでフォルダを閉じてしまう。
  • ファイルやディレクトリの付加的な情報をJavaScriptに与える場合、<li>タグ内に<span style="display:none" id="foo">を追記してJavaScriptから取得する事にした。これはJSONに修正すれば問題ないだろう。

と、少し気になる点もあるが、十二分に使えるスクリプトだと思うので、階層構造のデータを扱う時は選択肢の一つに入れてみてはどうだろうか。


via jQueryを使ってファイルツリーを表示できる『jQuery File Tree』 | IDEA*IDEA