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
-,

執筆者:

関連記事

Rails4.1で全文検索〜rroonga

By: Vinoth Chandar – CC BY 2.0 目次1 RailsでGroongaを使う選択肢2 サンプルのアプリ3 Gemfile4 データベースへの接続5 スキーマの設定 …

CarrierWaveで添付したファイルをrroongaで全文検索

By: Alan Levine – CC BY 2.0 目次1 Carrierwave2 rroonga3 Gemfile4 application.rb5 config/initiali …

Rails3.2でGoogle Calendarライクなカレンダーを使う〜fullcalendar-rails

目次1  fullcalendar-rails2 Hello fullcalendar3 オプション  fullcalendar-rails 2種類あるけど上の方を使った github.com/bok

Rails4.1に対応したRefinery CMS 3.0を試してみた

By: Alexis Madrigal – CC BY 2.0 目次1 Refinery CMS2 Gemfile3 generate4 configファイル5 起動6 管理画面7 トラブ …

Rails4.2でselectを絞込できるselect2を使ってみた〜select2

By: Metropolitan Transportation Authority of the State of New York – CC BY 2.0 目次1 select22 Ge …