ruby-on-rails-4 - wice_grid 动态添加行

Question

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

我希望能够切换网格上每个项目的详细信息。你能告诉我如何实现这个功能吗？我正在使用带有wice_grid gem的 rails 4

Answer 1

我发现了如何做到这一点：

看法：

<%= 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 -%>

.JS：

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

.CSS：

.extra-row {
  display: none;
}