CSVサーバー0.7 - ザリガニが見ていた...。

前回までの状態を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自体の優先順位は同列）