Question

我一直在努力寻找这个问题的最佳方法一个多星期了（是的，我是新手）。在我的应用程序中，用户创建项目，然后在我的数据库中选择工厂对象来构建关系（“pfollow”）。

我一直在使用一个带有下拉Jquery选择插件的collection_select，这个插件到目前为止名为“listselect”（它工作正常），但我现在希望能够将植物选择作为图像 - 而不是任何类型的下拉菜单，而是作为网格或在点击时具有某些Jquery-UI效果的图像圈。 collection_select目前看起来像这样：

    <%= form_for @project.prelationships.build(:pfollowed_id =>
                                       @project_id) do |f| %>
      <%= collection_select :prelationship, :pfollower_id, Plant.all, :id,   
                            :group, {},:multiple => true,
                            :class => "listselect" %>
      <%= hidden_field_tag :project_id, @project.id %>
    <div class="actions">
      <%= f.submit "Pfollow" %>
    </div>
   <% end %>

我现在无法弄清楚的是：在我的页面上展示这些植物图像并将选定的植物传递给控制器的最佳方法是什么？我一直在玩弄四种不同的方法：

a）构建一个Jquery-UI插件，如“简单照片管理器”或“可选择显示为网格”，然后尝试捕获“ui.selected”的li类。但是，如果我这样做，我不知道如何将所选对象的类传递回collection_select，我还没有在网上找到一个好的解决方案。

b）使用collection_select中的html选项块创建一个图像选择，其中添加了一些Jquery＆lt; - 是否可能？我找不到任何关于这样做或好插件的文档。

c）在没有collection_select的情况下将每个工厂图像作为唯一对象在选择页面上显示，并使每个工厂图像成为自己的“form_for image_tag”，在用Ajax点击后立即创建适当的关系＆lt; - 再次，我不是确定这是否可能

d）与（c）类似，将每个植物图像作为自己的唯一对象，然后在单击时捕获ui.selected并将其传递给form_for helper，如下所示：

    <%= form_for @project.prelationships.build(:pfollowed_id =>
                                       @project_id) do |f| %>

但是，再次，我无法弄清楚如何将所选图像传递到：pfollowed_id，form_for助手可以使用它传递给控制器。

提前致谢！

最后，我的代码实际上看起来像这样。还是要玩CSS和Jquery：

   <%= form_for @project.prelationships.build(:pfollowed_id =>
                                       @project_id) do |f| %>
     <%  Plant.all.each do |plant| %>
       <%= label_tag "prelationship[pfollower_id][]", plant.name %>
       <%= check_box_tag "prelationship[pfollower_id][]", plant.id %>
     <% end %>  
   <%= hidden_field_tag :project_id, @project.id %>
   <%= f.submit "Pfollow" %>
   <% end %>

Answer 1

你可能会使用Jquery等实现很多UI魔术，但是我建议用一个简单的方法用复选框替换dropdown -

<%= form_for(prelationship) do |f| %>
  <%  Plant.all.each do |plant| %>
    <%= label_tag plant.name %>
    <%= check_box_tag "prelationship[pfollower_ids]" %>
  <% end %>
<%= end %>

此代码为每个工厂创建一个复选框和相应的标签，当表单发布时，params[:prelationship][:pfollower_ids]包含所有pfollower_ids的列表

要进一步增强UI，您可以使用image_tag替换标签，并在每次单击图像标签时添加一些J来检查/取消选中相应的复选框。然后，也许如果你想删除复选框，可以用css隐藏它们，或者使用hidden_field_tag完全删除它们。

Rails Form_For / Select with Jquery和Images

1 个答案: