1

我有一个由我的控制器加载的城市列表@cities = City.order :name。

并在我的视图中显示复选框：

f.collection_check_boxes :cities_ids, @cities, :id, :name

每个复选框都包裹在一个 33% 宽的 div 中，它们的输出排列如下：

city_A   |   city_B   |   city_C
city_D   |   city_E   |   city_F
city_G   |   city_H   |   city_I
city_J   |            |

我试图@cities在将其传递给构建器之前对其进行排序，因此它可以在 3 列上垂直对齐：

city_A   |   city_E   |   city_H
city_B   |   city_F   |   city_I
city_C   |   city_G   |   city_J
city_D   |            |

在尝试了不同的组合Enumerable和Array方法（以及流鼻血和 2 阿司匹林）后，我决定问你们。谢谢！

临时解决方案

通过写一个助手我可以解决这个问题，如果你们能想出一个更好更紧凑的解决方案，我将不胜感激。看一下这个

def per_column(records, number_of_columns = 3)
  collection = records.dup
  result = []

  return collection if records.count <= number_of_columns

  # Build columns
  number_of_columns.times do |column_index|
    number_of_items = (collection.count.to_f / (number_of_columns - column_index)).ceil
    result << collection.slice!(0, number_of_items)
  end

  # Ensure each columns has same number of lines
  result.each {|column| column << nil until column.count == result[0].count }

  # Transpose
  result.transpose.flatten.compact
end

然后我就打电话

f.collection_check_boxes :cities_ids, per_column(@cities), :id, :name

似乎适用于任意数量的记录。再一次，如果您能指出我更优雅的解决方案，我将不胜感激

4

2 回答 2

4

嘿，我刚刚自己实现了这个！为了在表单中按列列出 collection_check_boxes 项目，请使用一点 CSS。

1）为您的 3 列创建一个 CSS 类：

.form-3-col {
  -webkit-column-count: 3; /* Chrome, Safari, Opera */
  -moz-column-count: 3; /* Firefox */
  column-count: 3; 
}

我建议将此类放在forms.css.scss您需要的样式表application.css中*= require forms

您会在这里找到一些有用的样式附加组件，例如列间距：http: //www.w3schools.com/css/css3_multiple_columns.asp

2) 在表单中实现 CSS 类：

 <li>
  <%= f.label :city %>
  <div class="form-3-col">
    <%= f.collection_check_boxes :cities_ids, @cities, :id, :name %>
  </div> <!-- form-3-col -->
 </li>

请注意，它是如何div仅包裹在f.collection_check_boxeserb 标签周围的，因为它会将其中的任何内容列化。

于 2015-12-09T19:58:01.417 回答
1

这样做的正确方法可能是将每个“列”包装在一个 div 中，而不是每个复选框。

但是，如果这不可行 - 如果您不想使用它collection_check_boxes，请查看我刚刚发布的in_columns gem。

那应该允许你做

f.collection_check_boxes :cities_ids, InColumns.columnize(@cities, 3).flatten.compact, :id, :name

或者

f.collection_check_boxes :cities_ids, @cities.in_columns(3).flatten.compact, :id, :name

如果您Array在 gem 中使用扩展名。

于 2013-08-15T10:42:25.660 回答