1

タイトルの通り、上下の矢印を表示しようとしています。現在 Ruby 2.0 / Rails 4.0 でビルド中

テーブルの列の並べ替えについて Railscasts をフォローしました ( http://railscasts.com/episodes/228-sortable-table-columns ) が、もちろん彼はテーブルを使用しているため、矢印がうまく表示されます。

div/spans/その他を使用したい。(大量のデータではなく、テーブルに入れる必要がある種類のデータではありません。)

そうは言っても、矢印用のアプリケーション ヘルパー メソッドを作成したところ、それらは機能しますが、asc のいずれかをクリックすると、両方の矢印が上向きになります。desc の 1 つをクリックすると、両方とも下向きになります。明らかparams[:direction]に asc または desc に設定されているため、両方の矢印が設定されます。それらをどのように分離しますか?やや疑似コードで:

if title && asc
  sort by title and asc && show up arrow (for title only)
if title && desc
  sort by title and desc && show down arrow (for title only)
if date posted && asc
  sort by created_by and asc && show up arrow (for date posted only)
etc.

私は巨大な if/then 条件ステートメントを持ちたくありませんが、もっと単純なものが欲しいです。

(プッシュが押し寄せてきた場合、Sort by: セクションにテーブルを使用しますが、それは非常にばかげているように思えます。これは最後の手段です...)

ここに私が持っているコードがあります:

show.html.erb

<h3>Images</h3>
<% if @user.images.any? %>
  <div class="sortable"><%= sortable "img_name", "Title" %><%= arrow %> | 
                        <%= sortable "created_at", "Date posted" %><%= arrow %>
  </div>  
  <%= render @images %>
  <%= will_paginate @images %>
<% end %>

application_helper.rb

def sortable(column, title = nil)
    title ||=  column.titleize
    css_class = column == sort_column ? "current #{sort_direction}" : nil
    direction = column == sort_column && sort_direction == "asc" ? "desc" : "asc"
    link_to title, {sort: column, direction:  direction}, {class: css_class} 
end

def arrow
    if params[:direction] == 'asc'
        image_tag("arrow_up.png", alt: "up arrow", size: "15x15")
    elsif params[:direction] == 'desc'
        image_tag("arrow_down.png", alt: "down arrow", size: "15x15")
    else
        # either a blank image to show or just force no-display of image
    end
end

users_controller.rb

def show
  @user = User.find(params[:id])
  @images = @user.images.paginate(page: params[:page]).order(sort_column + " " + sort_direction)
end
private
  def sort_column
    Image.column_names.include?(params[:sort]) ? params[:sort] : "created_at"
  end

  def sort_direction
    %w[asc desc].include?(params[:direction]) ? params[:direction] : "asc"
  end
4

2 に答える 2

1

私のように画像の代わりにグリフィコンを使用したい人がいる場合、この解決策が役立つかもしれません。この例では、FontAwesomeを使用しています

application_helper.rb

def sortable(column, title = nil)
  title ||= column.titleize
  css_class = column == sort_column ? "current #{sort_direction}" : nil
  direction = column == sort_column && sort_direction == 'asc' ? 'desc' : 'asc'

  capture do
    link_to({sort: column, direction: direction}, {class: css_class}) do
      concat title
      concat " "
      concat arrow(column)
    end
  end
end

def arrow(column)
  return '' if params[:sort] != column
  arrow = params[:direction] == 'asc' ? 'down' : 'up'
  "<i class='fa fa-caret-#{arrow}'></i>".html_safe
end

show.html.erb

<%= sortable "img_name", "Title" %>
于 2016-04-24T01:08:34.517 に答える
1

ここでテーブルを使用するのをためらうあなたの気持ちが理解できません。小さなテーブルであっても行、列、ヘッダーを含む表形式のデータです。セマンティック テーブル構造をテーブルのようなdiv 構造に置き換えるのはなぜですか?

そうは言っても、矢印ヘルパーを拡張して、矢印の対象となる列を送信します。

def arrow(column)
  # as you're not sorting on the column, you don't want to see the arrow at
  # all of the header is not for the sorted column
  return '' if params[:sort] != column
  # ...
end

テンプレートは次のようになります。

<%= sortable "img_name", "Title" %><%= arrow "img_name" %>

ここで不必要な繰り返しがあることに注意してください。これら 2 つのヘルパーは常に一緒に呼び出されるため、結合することもできます。

def sortable(column, title=nil)
  # ...
  capture do
    concat link_to(title, {...})
    concat " "
    concat arrow(column)
  end
end

より単純なテンプレートになります。

<%= sortable "img_name", "Title" %>
于 2013-10-25T20:26:51.350 に答える