Ruby on rails 使用“收集”复选框进行垂直排序`

我有一个由我的控制器加载的城市列表，带有

@cities=City.order:name

并在“我的视图”的复选框中显示这些内容：

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

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

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

在将其传递给构建器之前，我正在尝试对城市进行排序，以便它可以在3列上垂直对齐：

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

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

在尝试了

Enumerable

和

Array

方法的不同组合（以及一次鼻血和两片阿斯匹林）之后，我决定问问你们。谢谢

临时解决方案

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

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

---

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

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

但是，如果这是不可行的-如果您不想使用

收藏复选框

，请查看我刚刚发布的

这应该允许你这样做

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

或

---

如果您在gem中使用

数组

扩展。

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

但是，如果这是不可行的-如果您不想使用

收藏复选框

，请查看我刚刚发布的

这应该允许你这样做

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

或

---

如果您在gem中使用

数组

扩展。

嘿，我自己刚刚实现了这个！为了在列中列出表单中的集合复选框项目，请使用一些CSS

1） 为3列创建CSS类：

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

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

我建议将此类放在名为

forms.css.scss

的样式表中，您需要在

应用程序中使用
*=require forms
css

您将在此处找到一些有用的样式附加项，如列间距：

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\u复选框

erb标记，因为它将列化其中的任何内容。

嘿，我刚刚自己实现了这个！为了在列中列出表单中的集合复选框项目，请使用一些CSS

1） 为3列创建CSS类：

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

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

我建议将此类放在名为

forms.css.scss

的样式表中，您需要在

应用程序中使用
*=require forms
css

您将在此处找到一些有用的样式附加项，如列间距：

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\u复选框

erb标记，因为它将列化其中的任何内容。

City.order（'name DESC'）

order

take string not sym可以与sym配合使用：）无论如何，谢谢你是对的，我只是查看了源代码，但是

sym

将默认为

ASC

无论如何，回到你的问题，你可以使用

group\u by

？像

@cities.group_by{c | c.id%3}

Hmm，这不起作用，因为排序是通过：name完成的。我意识到我的问题有误导性，因为我指的是城市id。我现在编辑它是为了让它更清楚

city.order（'name DESC'）

order

take string not sym可以与sym配合使用：）无论如何，谢谢你是对的，我只是查看了源代码，但是

sym

将默认为

ASC

无论如何，回到你的问题，你可以使用

group\u by

？像

@cities.group_by{c | c.id%3}

Hmm，这不起作用，因为排序是通过：name完成的。我意识到我的问题有误导性，因为我指的是city_id。我现在编辑它是为了让它更清晰（现在看起来不错：），但我遇到了同样的问题：如果记录的数量不能被3整除，那么输出就是扰码。我在你的git nowNote中为任何路过的人发布了一个问题，这个问题与Jakob的问题完全相同：Jakob更新了他的gem，因此它完全可以应对这种情况。in_columns gems可以与Rails表单集合帮助器/生成器一起使用，以显示每列的内容。又好又容易。很好的工作现在看起来不错：）但我遇到了同样的问题：如果记录的数量不能被3整除，那么输出就是置乱。我在你的git nowNote中为任何路过的人发布了一个问题，这个问题与Jakob的问题完全相同：Jakob更新了他的gem，因此它完全可以应对这种情况。in_columns gems可以与Rails表单集合帮助器/生成器一起使用，以显示每列的内容。又好又容易。干得好