제목으로 asc/desc (RoR 4)

Question

을 정렬 기준으로 화살표를 표시하는 방법은 위/아래 화살표를 표시하려고합니다. 현재 Ruby 2.0/Rails 4.0을 기반으로합니다.

나는 테이블 열 정렬에 대한 railscasts를 따라 왔지만 (물론 http://railscasts.com/episodes/228-sortable-table-columns) 테이블을 사용하여 화살표가 멋지게 표시됩니다.

divs/span/그 밖의 것을 사용하고 싶습니다. (많은 양의 데이터가 아니며 테이블에 있어야하는 데이터가 아닙니다.)

그런데 저는 화살표를 위해 응용 프로그램 도우미 메서드를 만들었지 만 작동하지만 오름차순으로 하나를 클릭하면 두 개의 화살표가 위로 향하게됩니다. 설명을 위해 하나를 클릭하면 두 점을 모두 가리 킵니다. 분명히 params[:direction]이 오름차순 또는 내림차순으로 설정 되었기 때문에 두 화살표가 모두 설정됩니다. 어떻게 분리합니까? 다소 의사 코드에서 :

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. 

정말 거대한 경우/다음 조건부 문이 싶지는 않지만 간단하게 뭔가를하고 싶습니다. 여기

코드입니다 :

는 (... 섹션,하지만 그건 정말 지독하게 어리석은 것하고 조금 최후의 밀어 쑤셔 넣어 오면, 난 그냥 정렬 기준에 대한 테이블을 사용합니다) 나는이있어 :

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 

내가 여기에 테이블을 사용하도록 거부감을 이해하고 있지 않다

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

users_controller.rb. 작은 테이블 인 경우에도이 은 행, 열 및 머리글이있는 여전히 테이블 형식의 데이터입니다. 왜 테이블 구조의 div 구조로 시맨틱 테이블 구조를 대체할까요? 당신은 알게 될 것이다 있지만

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

:처럼 보이는 템플릿의 결과

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 

:

말했다되고 그건

, 나는 화살표가있는 열 보낼 화살표 도우미를 확장하는 것 여기서 불필요한 반복. 이 두 도우미는 항상 함께라는되어 있기 때문에 그들은뿐만 아니라 결합 될 수있다

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를 사용하고 있습니다.

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