Railsで使えるGem

Rails3.2でajaxなフォルダツリーを導入する~dynatree-rails

投稿日:

 

jQuery UIのプラグインdynatreeをRailsで使ってみた

github.com/glebtv/dynatree-rails

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

サンプル wwwendt.de/tech/dynatree/doc/samples.html

Gemfile

bundle

application.js

 application.css

jQuery.uiはcoreだけでいいかも

で、第一歩

index.html.erb

 assets/javascripts/folders.js.coffee

できた

ちなみにclass=”folder”を指定しないと単なるドキュメントのアイコンになる

Showとしか表示されていないのは、文字列はJavascriptで設定していて、aタグの場合はこういうふうに認識されるから

Note that <a> elements are recognized:
<li><a href='URL' target='TARGET'>TITLE</a> will result in
node.data.title = TITLE
node.data.href = URL
node.data.target = TARGET

 

そしてクリックも普通のhtmlのリンクじゃなくてイベントを呼んでる

onActiveアクションで取れる

nodeインスタンスはたくさんの要素を持ってるんだけどli要素のidを取るにはdata.keyで取れる

 

ul>li要素のpartial化

ajaxにするにはまず部分テンプレート

rails.vimからは該当部分を選択して、:Rextract ファイル名で部分テンプレートを切り出せる

index.html.erb

 _list.html.erb

ツリー構造のモデルをつくる

ディレクトリみたいないくつも階層をもつツリー構造のモデルをつくるにはいくつか方法があるんだけど

www.mongodb.org/pages/viewpage.action?pageId=7209187

データに親要素のidをもたせるのがよくある方法

一番根もとでは、親がない要素をデータベースから取り出して、次に、そのデータのidを親に持つデータを取り出す、、、ということを順番に繰り返せばツリー構造になる

続く

あとは

フォルダをクリックするとフォルダが開いた画像にして

その下にajaxで部分テンプレートを張り付ければ動くはず。。。

-Railsで使えるGem
-,

執筆者:

関連記事

Ubuntu ServerのGuardからGrowl for Windowsにネットワーク経由で通知する

github.com/guard/guard 普段はWindows7から仮想環境(VirtualBox)のUbuntu Server 12.04.1へputtyで接続して開発してます. Virtual …

Railsのテーブル並び替えを実装する

    環境 RailsにTwitter Bootstrapを設定する~twitter-bootstrap-rails 参考 #147 Sortable Lists (revise …

no image

Rails3.2.8でPostgreSQLを使う(開発環境)〜pg gem

環境 Ubuntu server12.04にPostgreSQLをインストールする 参考 #342 Migrating to PostgreSQL @railscasts 目次1 準備2 データベース …

全文検索エンジンGroongaをRubyから利用するライブラリのチュートリアルをやってみた〜rroonga

By: Kevin Jarrett – CC BY 2.0 目次1 Groonga2 Groongaのインストール3 rroongaのインストール4 チュートリアルの開始5 データベースの …

no image

RubyとRailsのテスト関係のリンクメモ

  目次1 RSpec2 Factory Girl3 Capybara RSpec rspec.info/ Expectations とMatcher rubydoc.info/gems/r