jQuery UI Railsで使えるGem

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

投稿日:

 

前回

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

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

 

フォルダの開け閉じを機能させる

前回までフォルダの開き閉じはできるようになったけど、閉じるときにその子ノードを削除していたので、
親を選択してから子ノードを選択すると、その子ノードまで選択されてしまうというバグがあった

autoCollapse

自動で開く閉じるをやってくれるオプション.
うまく機能したけど、あとからノードを足した場合はダメっぽい.

ので、autoCollapseは設定したうえで、さらに子ノードを追加したときに開くオプションをつけた.

expand:true

ノードをつくったとき初期状態で開いておくオプション.これも子ノードを追加したときには機能してない?
たぶんつくった子ノード自身を開くオプションで今回は子ノードをくっつけて、親ノード自身を開きたいので違う

LazyRead

ajaxを通信を想定してるんだけどうまく機能しなかった

 

コード

たぶん使い方としては、前についている+ボタンでフォルダの開閉をすることを想定してるぽい

結局、子ノードをつくるときに、すでにある子ノードは足さない方針にした

ちょっと冗長だけど

 

フォルダを追加するボタンをつくる

ダイアログフォームを設定する

次にjQuery UIのダイアログを利用してフォルダを追加するフォームをつくる

計画としてはこんな感じ

  1. index.htmlのボタンから、new_folder_pathをGETして、new.jsを取る
  2. new.jsでフォームダイアログを出現させる
  3. create.jsにいってダイアログを閉じる

index.htmlのボタンから、new_folder_pathをGETして、new.jsを取る

まず、remoteオプションをtrueにするとRailsはhtmlテンプレートじゃなくて、jsテンプレートを読みにいってくれる
ついでに、jQuery UIのButtonをつかって軽くリンクを装飾する

コントローラーにjsフォーマットを追加

app/assets/javascripts/folders.js.coffee

ボタン装飾をつける

new.jsでフォームダイアログを出現させる

jQueryでどこかにdiv要素をつくって、そこをダイアログにする

index.html.erb

app/views/folders/new.js.coffee

それっぽい

create.jsにいってダイアログを閉じる

まず、formのsubmitもjs通信にする

_form.html.erb

rermoteオプションをtrueにするだけ

コントローラーにjsフォーマットを追加

app/views/folders/create.js.coffee

ダイアログを閉じる

 

jQueryUIのDialogをカスタマイズする6つの物凄く細かい小技

 

あとはドラッグアンドドロップと右クリックメニューをやりたい

-jQuery UI, Railsで使えるGem
-, ,

執筆者:

関連記事

Rails3.2でTwitterBootstrap導入のあれこれ

  目次1 sass-rails-bootstrap導入2 Layout関係3 Notification4 confirmをmodalにする5 SimpleForm導入6 kaminari導 …

もしもRails3.2とBackbone.jsでリアルタイムな2ch風な掲示板をつくったら〜private_pub

By: Kevin Dooley – CC BY 2.0   まだ、Observerのことがよくわかってない ので、過去のやつをもとにやってみた dry-shore-2517.h …

Electron+Browserify(debowerify)+jQueryUi

By: Wilson Hui – CC BY 2.0 目次1 bower install2 browserify(debowerify)3 require4 jQueryUIをMarion …

Rails3.2でHTML5で取得した位置情報をMongoDBに保存してGoogleMapsでみる~mongoid、gmaps4rails

前提 Rails3.2でhtml5で取得した位置情報をAjaxで住所表示する~geocoder 目次1 Mongoid2 スケルトンを作る3 Gmap4railsのインストール4 とりあえず地図を表示 …

Rails4でのJSONテンプレート~jbuilder+rabl+ruby

By: Wonderlane – CC BY 2.0[/caption] Rails4からJSONも標準でjbuilderを使ってテンプレートから出力できるようになった けど、しっくり来な …