如何顯示基於排序asc/desc的箭頭（RoR 4）

Question

如標題所示，我試圖顯示上/下箭頭。目前建立在Ruby 2.0/Rails 4.0上

我已經遵循關於排序表列（http://railscasts.com/episodes/228-sortable-table-columns）的railscasts，但他當然使用表格，所以他的箭頭顯示得很好。

我想使用divs/span /其他任何東西。 （這不是很多數據，它不是需要在表中的數據類型。）

這就是說，我去爲我的箭頭做一個應用程序幫手的方法，他們的工作，但如果我點擊一個asc，兩個箭頭都會指向。如果我點擊一個desc，兩者都指向下。顯然，因爲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條件聲明，但想要更簡單。

（如推來推去，我只使用一個表的排序方式：部分，但只是似乎真的非常愚蠢的，這是一個有點不得已......）

下面是代碼我有：

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 

Answer 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" %> 

儘管你會注意到這裏有一些不必要的重複。由於這兩個幫手總是叫他們一起也可以被加入：

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

導致簡單的模板：

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

Answer 2

萬一別人會希望像我這樣的使用，而不是像glyphicon，這個解決方案可能很有用。在這個例子中，我正在使用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" %>