Rails & Ransack 图标显示字段是可排序的答案

【问题标题】：Rails & Ransack Icon to Show Field is SortableRails & Ransack 图标显示字段是可排序的
【发布时间】：2017-01-23 04:56:52
【问题描述】：

我正在处理 Rails 应用程序的要求，将图标添加到 Ransack 表单的列表结果的列标题。该图标应该是一个双箭头，其样式类似于 Ransack 附加到列标题以显示它已按该列排序的图标。 Sortable IconThe Ransack sort_asc 或 sort_desc 图标应该替换排序图标。我搜索了 Ransack 文档、Stackoverflow 和 google，但均无济于事。
这是搜索列表 *.html.haml 文件的片段。

%table.table.table-hover
    %thead
        %tr
            %th
                = sort_link(@query, :title)
            %th
                = sort_link(@query, :description)
            %th
                = sort_link(@query, :company_name, 'Company')
            %th
                = sort_link(@query, :shift)
            %th
                = sort_link(@query, :address_state)
            %th
                = sort_link(@query, :address_city)`and the direction of the sort.

【问题讨论】：

标签： ruby-on-rails ransack

【解决方案1】：

Ransack 具有custom_arrows 的配置选项。您可以在 ransack 初始化程序中使用它来覆盖默认箭头。例如：

Ransack.configure do |config|
    config.custom_arrows = {
      up_arrow: '<i class="fa fa-long-arrow-up"></i>',
      down_arrow: 'U+02193'
    }
  end

【讨论】：

是的，但是有没有办法为未排序列的初始显示设置一个图标以表明它是可排序的？
@PaulCaston Ransack 不支持这种行为。您需要在 ransack FormHelper 中覆盖 order_indicator 方法：github.com/activerecord-hackery/ransack/blob/…
感谢@Slava.K 正是我想要的。
@PaulCaston 你现在可以使用 default_arrow

【解决方案2】：

正如@Slava.K 所述，您可以在初始化程序中调整 Ransack 配置或覆盖 Ransack 的 FormHelper。

但如果您想在视图中手动执行此操作，您可以！使用 sort_url 帮助器创建链接，然后检查 Ransack 的 sorts 数组以确定正在使用的排序和方向（asc/desc），然后呈现适当的图标。

此示例将显示三个图标之一（上/下/中性），具体取决于字段是否已排序，以及它的排序方向。我们将使用fontawesome-sass gem 来呈现图标，但您可以将icon() 助手替换为您想要使用的任何图标方法/标记。

  # some_view.html.slim

  = link_to sort_url(@q, :name)

    # Display label
    span Name

    # Sort icon

    # Check if ransack applied a sort to this field
    - sort = @q.sorts.find {|s| s.name == 'name'}

    # Render appropriate icon (up/down/neutral)
    
    # If this column is sorted by 'asc' display 'sort-up' icon
    = icon(:fas, 'sort-up') if sort.present? and sort.dir == 'asc'

    # If this column is sorted by 'desc' display 'sort-down' icon
    = icon(:fas, 'sort-down') if sort.present? and sort.dir == 'desc'

    # If no sort is applied display a neutral icon
    = icon(:fas, 'sort') unless sort.present?

我们可以通过使用三元运算符来简化上面的代码，就像这样......

  # some_view.html.slim

  = link_to sort_url(@q, :name)
    span Name
    - sort = @q.sorts.find {|s| s.name == 'name'}
    = icon :fas, sort.present? ? (sort.dir == 'asc' ? 'sort-up' : 'sort-down') : 'sort'

如果你想变得非常花哨并保持视图的 DRY，你可以创建一个类似于 Ransacks sort_url 或 sort_link 的辅助方法并将此标记放入其中。它可能看起来像这样......

  # some_helper.rb

  def custom_sort_link(search_object, attribute, *args)
    link_to sort_url(search_object, attribute, *args) do
      sort = search_object.sorts.find {|s| s.name == attribute.to_s}
      content_tag(:span, attribute.to_s.capitalize) + icon(:fas, sort.present? ? (sort.dir == 'asc' ? 'sort-up' : 'sort-down') : 'sort')
    end
  end

然后在你看来，像这样打电话给custom_sort_link...

  # some_view.html.slim

  = custom_sort_link(@q, :name)

附带说明，如果您有 FontAwesome Pro，双色调图标看起来会更好。只需将:fas 替换为:fad。

【讨论】：

【解决方案3】：

默认排序图标可以这样实现：

if defined?(Ransack)
  Ransack.configure do |config|
    config.custom_arrows = { default_arrow: '<i class="fa fa-sort"></i>' }
  end
end

【讨论】：