Ruby on rails 4 wice_网格动态添加行

Ruby on rails 4 wice_网格动态添加行,ruby-on-rails-4,row,dynamically-generated,wice-grid,Ruby On Rails 4,Row,Dynamically Generated,Wice Grid,我想动态创建一个“详细信息”行,如下所示: 我希望能够切换网格上每个项目的详细信息。你能告诉我如何实现这个功能吗? 我将rails 4与一起使用,我发现了如何做到这一点: 视图: .CSS: <%= grid(@items_grid) do |g| g.after_row do |fill, number_of_columns| content_tag(:tr, class: 'extra-row') do content_tag(:

我想动态创建一个“详细信息”行,如下所示:

我希望能够切换网格上每个项目的详细信息。你能告诉我如何实现这个功能吗?
我将rails 4与

一起使用,我发现了如何做到这一点:

视图:

.CSS:

<%= grid(@items_grid) do |g|

    g.after_row do |fill, number_of_columns|
        content_tag(:tr, class: 'extra-row') do
              content_tag(:td,
                   content_tag(:div) do
                       # without buffer only the last tag will appear
                       buffer = content_tag(:p,"data1: #{item.add_data1}")
                       buffer += content_tag(:p,"data2: #{item.add_data2}")
                       raw buffer
                   end,
                   colspan: number_of_columns)
         end

  g.column name: "ID", attribute: 'id' do |item|
    item.id
  end

  g.column name: "Data", attribute: 'data' do |item|
    item.data
  end

  g.column do |item|
    button_tag("Details", class: "btn btn-default toggle-trigger")
  end

end -%>
$(document).on("page:load ready", function(){
    $(".toggle-trigger").click(function(){
        $(this).parents('tr').next('.extra-row').slideToggle("fast");
        return false;
    });
});
.extra-row {
  display: none;
}