CSVサーバー0.7

Ruby on Rails

前回までの状態をCSVサーバー0.7として公開しました。

更新履歴

  • 検索フィルター内でリンクをクリックした時も「処理中...」の表示をするようにしました。
  • フィルター中は、テーブルの外枠を強調表示するようにしました。フィルター状態かどうか、一目で判断できます。
  • 「フィルターを解除する」をクリックすると、フィルターを解除した状態が維持されます。（以前はその時だけで解除されて、次のページを見たり等、何か操作をするとフィルター状態に戻っていました。だから「一時的に」という言葉が入っていたのです。）
  • 「フィルターを追加」リンクをクリックした時の、IE6でうまく動作しない状況を改善しました。

忘れたくない自分メモ

form_remote_tagで、id属性を設定したい。
<%= form_remote_tag :update => 'list_update', 
                    :submit => 'list_params', 
                    :url => {:action => 'filter_on'}, 
                    :html => {:id => 'list_form'} %>
<%= observe_form :list_form, 
                 :update => 'list_update', 
                 :submit => 'list_params', 
                 :url => {:action => 'list_update'} %>
  • :html => {:id=>'list_form'}で、htmlオプションの指定が可能になる。
クリックしたら、リンク文字列を「処理中...」と表示する。
<%= link_to_remote 'フィルターを解除', 
                   {:_update => 'list_update',
                    :submit => 'no_filter_params',
                    :url => {:action => 'filter_off', :filtering => ''},
                    :loading => "Element.update('filter_cancel', 'フィルターを解除中...')",
                    :complete => "Element.update('filter_cancel', 'フィルターを解除')"},
                   :id => 'filter_cancel' %>
  • "Element.update('filter_cancel', 'フィルターを解除中...')"の部分は、以下のように書き換えてもOK。
    • "$('filter_cancel').firstChild.nodeValue = 'フィルターを解除中...'"
    • "$('filter_cancel').firstChild.nodeValue += '中...'"
2つのブロック要素を、右寄せ、左寄せで1行に表示する。
<div class="action">
  チェックした項目を削除
</div>

<div class="page">
  ページ: <前 1 2 3 次>
<div>

<style>
  div.action {float: right;}
</style>
  • float: rightのように指定すると、指定されたブロックはページの右に配置される。
  • 左の余白部分には、続く内容が描画される。（floatの指定がなければ、通常は改行されて次の行から描画される。）
クラス属性だけ追加する。
  def filter_on
    render :update do |p|
      p << "Element.addClassName('csv_list', 'filtering')"
    end
  end
  • 書式は次のようになる。Element.addClassName('操作対象のid属性', 'class名称')
複数クラス属性を利用して指定する。
<table class="list filtering" id="list">
</table>

<style>
  table.list.filtering {border:2px groove #666;}
</style>
  • htmlでは、class="list filtering"のように、クラス名をスペースで区切る。
  • cssでは、table.list.filteringのように、ドットを付加したクラス名を並べる。
    • table.filtering.listでもOK。クラス名の順序は関係無い。
    • table.list、table.filteringでは、どちらもマッチする。その場合、後で指定したスタイルが優先される。（list、filtering自体の優先順位は同列）