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.0でもajaxなデータテーブルを使う~ajax-datatables

Railsでajaxなテーブルを使う~datatables Rails4でのJSONテンプレート~jbuilder+rabl+ruby 目次1 index.json.jbuilder2 tasks.j …

SASS/SCSS+COMPASS+zurui-sass-railsで角丸・グラデ・半透明・テキストシャドウ・ボックスシャドウ

By: Ole Houen – CC BY 2.0 sass-lang.com/ Sassの基礎 (全15回) ドットインストール ネストを覚えた人のためのSassの便利な使い方 comp …

no image

Rails3.2でリアルタイムメッセージングサービスをherokuにデプロイしたよ〜private_pub,Faye

参考 Rails3.2でリアルタイムメッセージング~Private_pub、Faye さっそくherokuにあげてみた ブラウザを2つ起動して並べてみれば投稿した内容が即時にほかのブラウザに反映するの …

WindowsのRubyでExcelを操作~WIN32OLE

By: Môsieur J. version 9.1 – CC BY 2.0 目次1 WIN32OLE2 hello world3 Excelオブジェクトモデル4 絶対パスを取得するメソッ …

RailsにTwitter Bootstrapを設定する~twitter-bootstrap-rails

環境 ruby 1.9.3  & rails 3.2.8 適当なscaffoldを作っておく

  github.co …