soraなりの日々 - fc2 -

こころにひっかかったもの

rails と jquery treeview でディレクトリツリーをらくらく実装する

ども、ご無沙汰しております。。

今度の rubykaigi2011 に参加させて頂くこととなりました!
会場で見かけたら、意外に良いヤツなんでお気軽にカマってやってください(TT;

[rubykaigi2011]
http://rubykaigi.org/2011/

それと、もう一つ。
来る7月28日(木)、福岡で活動している Androidの会福岡支部九州GTUG
HTML5+α福岡iDevQ、そして、AppleKnight の4つのコミュニティが
福岡県Ruby・コンテンツ産業振興センターに集結し、同時に勉強会、懇親会を行います。

ご興味のある方は、ぜひともご参加ください!!
参加登録は下記のリンク先より facebook にて参加表明をお願いいたします。

[futuresync]
http://futuresync.jp/

宣伝終わりです。
表題の記事を会社のブログにあげました!

[railsjquery treeview でディレクトリツリーをらくらく実装する]
http://blog.fusic.co.jp/archives/1829

お時間とご興味がありましたら、ぜひご一読を!
あと、一応ここにも記事を書いておこうと思います。

このエントリーをはてなブックマークに追加
今回とあるお客様の rails 案件にて、ツリービューを作る必要がありました。
一から作ろうかと思っていたところ、jquery ui の treeview を見つけ、
使ってみたので、簡単なサンプルとともにご紹介をします。

いやー、それにしてもコレ凄く便利です!!


まずは、バージョン確認です。
$ ruby -v
ruby 1.9.2p0 (2010-08-18 revision 29036) [i686-linux]

$ rails -v
Rails 3.0.9



rails のプロジェクトを作成します。
$ rails new treeview_test
$ cd treeview_test/
$ rm public/index.html



prototype.js を削除ります。
サヨナラ~、お元気で~♪
$ vim Gemfile

 gem 'jquery-rails'

$ rails g jquery:install



ツリービューを表示するためのコントローラを作成します。
$ rails g controller Treeviews index
$ vim routes.rb

 root :to => "treeviews#index"



そして、本日の主役のご登場!
jquery treeview を下記よりダウンロードします。
http://bassistance.de/jquery-plugins/jquery-plugin-treeview/

js や css、jpg などを rails の各ディレクトリにコピーします。
画像は、images に “treeview” というディレクトリを
作成し、そこにコピーしています。
そして、jquery.treeview.css に記載されている画像のパスを
ちょっと変更します。
 images/xxxx → ../images/treeview/



treeview を取り込みます。
$ vim app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
<head>
 <title>TreeviewTest <%= stylesheet_link_tag :all %>
 <%= javascript_include_tag :defaults %>
 <%= javascript_include_tag 'jquery.treeview' %>
 <%= javascript_include_tag 'jquery.treeview.edit' %>
 <%= javascript_include_tag 'jquery.treeview.async' %>
 <%= csrf_meta_tag %>
</head>
<body>

<%= yield %>

</body>
</html>



ツリービューを表示するため view を書き換えます。
$ vim app/views/treeviews/index.html.erb

<script type="text/javascript">
$(document).ready(function(){
 $("#example").treeview({});
});
</script>

<ul id="example" class="filetree">
  <li><span class="folder">Folder 1</span>
   <ul>
     <li><span class="file">Item 1.1</span></li>
   </ul>
  </li>
  <li><span class="folder">Folder 2</span>
   <ul>
     <li><span class="folder">Subfolder 2.1</span>
      <ul>
        <li><span class="file">File 2.1.1</span></li>
        <li><span class="file">File 2.1.2</span></li>
      </ul>
     </li>
     <li><span class="file">File 2.2</span></li>
    </ul>
  </li>
  <li class="closed"><span class="folder">Folder 3 (closed at start)</span>
   <ul>
     <li><span class="file">File 3.1</span></li>
   </ul>
  </li>
  <li><span class="file">File 4</span></li>
</ul>



完成です!!
いやー、ほんとめちゃくちゃ簡単ですね!!
まー、これだけだと寂しいのとせっかくの rails も意味がないので
rails にディレクトリ一覧を返す関数を作成し、ajax 使って
ディレクトリ階層を動的に表示できるように変更します。
おー!rails っぽいですね!


routes にパスを追加します。
$ vim config/routes

 match '/treeviews/get_dir_list' => 'treeviews#get_dir_list'



さっきの view を書き換えます。
$ vim app/views/treeviews/index.html.erb

<script type="text/javascript">
$(document).ready(function(){
$("#example").treeview({});
$("#example2").treeview({
url: "<%= treeviews_get_dir_list_path %>"
});
});
</script>

<h4>通常のツリービュー表示</h4>

<ul id="example" class="filetree">
  <li><span class="folder">Folder 1</span>
   <ul>
     <li><span class="file">Item 1.1</span></li>
   </ul>
  </li>
  <li><span class="folder">Folder 2</span>
   <ul>
     <li><span class="folder">Subfolder 2.1</span>
      <ul>
        <li><span class="file">File 2.1.1</span></li>
        <li><span class="file">File 2.1.2</span></li>
      </ul>
     </li>
     <li><span class="file">File 2.2</span></li>
    </ul>
  </li>
  <li class="closed"><span class="folder">Folder 3 (closed at start)</span>
   <ul>
     <li><span class="file">File 3.1</span></li>
   </ul>
  </li>
  <li><span class="file">File 4</span></li>
</ul>


<h4>sync させたツリービュー表示</h4>
<ul id="example2" class="filetree">

treeview の url に先ほど routes に追加したパスを記載します。


controller もゴニョゴニョと追加します。
$ vim app/controllers/treeviews_controller.rb

class TreeviewsController < ApplicationController

 def index
 end

 def get_dir_list
  root_flg = (params["root"] == "source") ? true : false
  path = "./"
  path = params["root"] unless root_flg
  arry = []
  d = dir_list(path, arry)
  render :json => arry || [], :layout => false
 end

protected
 def dir_list(path, arry=[], root_flg=false)
  Dir.glob("#{path}/*").map do |d|
   classes = "file"
   classes = "folder" if FileTest.directory?(d)
   hasChildren = (FileTest.directory?(d)) ? true : false
   h = {"id" => d, "text" => File.basename(d), "path" => File.dirname(d), "expanded" => false, "classes" => classes, "hasChildren" => hasChildren, "children" => []}
   arry << h
  end
  arry
 end

end


dir_list() の関数でディレクトリ情報の hash を作成し、view 側に json で返します。
返された json を treeview 側が解析してツリービューを表示します。
返す hash の id のところがミソでして、ここにパスを記載していると
treeview にてディレクトリを選択された場合、params["root"] に選択された
ところのパスが渡されます。
一番上のルートの場合には、params["root"] には、”source” という文字が渡ってきます。

今回もいつもの如くソースは github にあげてます。
また、サンプルをここに置いてますので実際の動作を確認できます。
今回始めて dotcloud を使ってみました。
これまためちゃくちゃ便利ですねー!
dotcloud で rails を動かす方法とかは、また次回にでも、デモ。

それでは、良い rails ライフを~。

[ソース]
https://github.com/sora0513/TreeViewTest

[デモ]
http://8befe980.dotcloud.com/
このエントリーをはてなブックマークに追加

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバックURLはこちら
http://sora2hs.blog70.fc2.com/tb.php/531-b81a1998
この記事にトラックバックする(FC2ブログユーザー)