ツリー表示に使えるjavascriptまとめ

ツリー表示に使えるjavascriptまとめ

カテゴリーツリーの管理画面のUIってどうするのがベターなんでしょうか。。
やりたいこととライブラリのはざまで彷徨ってたらたくさんリンクが集まったのでまとめておきます

jQuery plugin: Treeview

[browser-shot url=”http://jquery.bassistance.de/treeview/demo/” width=”400″]

  • ul>liの構造をtree表示してくれる
  • シンプル

jQuery treeTable Plugin Documentation

[browser-shot url=”http://ludo.cubicphuse.nl/jquery-treetable/#examples” width=”400″]

  • treeでありtable
  • 多機能
  • ドラッグアンドドロップ可能
  • 反面classを振るのが非常にめんどくさい

jsTree

[browser-shot url=”http://www.jstree.com/” width=”400″]

  • 多機能
  • ドラッグアンドドロップ可能

Jquery collapser plugin – Demo

[browser-shot url=”http://www.aakashweb.com/resources/pages/demos/jquery-collapser/” width=”400″]

  • ul>liの構造をtree表示してくれる
  • シンプル

Drag and Drop the Tree – jQuery EasyUI

[browser-shot url=”http://www.jeasyui.com/demo/main/index.php” width=”400″]

  • jsonをtree上に表示
  • ドラッグアンドドロップ可能

TreeGridとの複合技が使えればすごくいいんだけど…

高度なグリッド|jqGrid

[browser-shot url=”http://www.jqueryhelp.net/advancedgrid/02.html” width=”400″]

  • jsonをtree上に表示

並び替えやドラッグアンドドロップはなさそうに見える
Nestedモデルをそのまま使えそうなライブラリーなだけに残念

Dynatree – Example Browser

[browser-shot url=”http://wwwendt.de/tech/dynatree/doc/samples.html” width=”400″]

  • jsonをtree上に表示
  • ドラッグアンドドロップ可能

ドラッグアンドドロップの見た目がわかりやすい

Tree Example

[browser-shot url=”http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/tree/reorder.html” width=”400″]

  • Ext JS
  • 多機能
  • ドラッグアンドドロップ可能

見た目が固定になっちゃいそうだけど高機能そう
こちらもTreeGridがあるけど並び替えは無理そう

こういうのはneverまとめとかに書いたほうが追記してくれる人がいそうで便利なのかもしれないと書いてて思った

コメントを残す