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

執筆者:

関連記事

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

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

今度こそRails3.2からdocxを生成する

  前提 Rubyからdocxを生成する 前回、イキオイアマって自分でdocxを生成する簡単なライブラリを作ってしまった.(なんて車輪の再発明 今回はこれをRailsから利用してみる. 目次 …

Rails3.2で位置情報を日本語表示の住所に変換する~geocoder

ついにブログ記事が100件突破した! そのうちメニュー項目などをわかりやすく構成し直したいと思う いまはRailsのプログラムが楽しくて仕方ない時期なので色々と試して書き溜めたいと思う EverNot …

ThoughtBotの『Backbone.js on Rails』の目次と見出しをななめ読み

By: John – CC BY 2.0 learn.thoughtbot.com/products/1-backbone-js-on-rails 買いました 電子書籍で137ページに$4 …

Ruby+guardでSass+Compass+CoffeeScriptの自動コンパイル環境を整える

    Ubuntu12.04.1でCoffeeScriptの自動makeとブラウザの自動リロード~guard-coffeescript すでにCoffeeScriptを自動Mak …