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

執筆者:

関連記事

Rails3.2でみたまま編集 〜hallo editor

  By: Fabio Marini – CC BY 2.0 文字をダブルクリックしてそのままフォーム編集するやつのメモ~in place edit 文字をダブルクリックしてその …

no image

TwitterBootstrapRailsでエラーが出る件

    undefined method `less’・・・的なエラーが出た. とりあえず下のgemを足したら動いた.そのうち修正されるとおもう. [crayon-5b …

RubyでWikiをはじめる〜gollum

目次1 環境2 インストール3  ハロー Gollum4 Powでつかう5 情報 環境 Ruby 2.1.0 Mac OSX Mavericks インストール 自分の環境ではこれをいれとかないとインス …

Rails3.2でリアルタイムメッセージング~Private_pub、Faye

  Railsで簡単に非同期通信ができるPrivate_pubというgemを試した もともとrubyにはFayeという非同期通信ができるgemがあったが、簡単に安全な接続ができる実装を加えた …

no image

Rails4でOpenDocumentText(.odt)を作成~serenity(未完)

StackOverFlowでの質問に返事が来てたよ!ヽ(=´▽`=)ノ stackoverflow.com/questions/13080178/encodingundefinedconversion