如何正确使用带有 ERB 的 bootstrap 3 表？

Posted 2023-02-26

【中文标题】如何正确使用带有 ERB 的 bootstrap 3 表？

【英文标题】：How do you use a bootstrap 3 table with ERB correctly?

【发布时间】：2014-10-11 05:28:51

【问题描述】：

有一个组织视图，我想将一部分渲染到该视图中，以便向该组织的用户展示一系列附加功能。为此，我设置了一个 Bootstrap 面板，并在此面板内呈现一个引导表，以显示属于该组织的每个用户。我可以让它在没有表格 css 的情况下正常工作（就像单独的 div 元素每行显示一个用户），但是由于某种原因，当我创建一个表格时，事情会不断为每个用户构建全新的表格（包括 thead 部分）目的。你能帮忙吗？

组织展示页面html：

<div class="col-md-6">
    <ul class="users">
    <div class="panel panel-default">
      <div class="panel-heading float-left">
        <% if current_user.admin? %>
        <%= link_to "Add more users", add_user_path(current_user.organization), class: "btn btn-large btn-success btn-panel" %>
        <% end %>
        <h2 class="panel-title">Users:</h2>
      </div>
        <div class="panel-body panel-height">
            <%= render partial: "users_index", collection: @users_index, as: :user %>
            <br></br>
        </div>
    </div>
    </ul>
</div>

我的 users_index 部分的 html：

<div class="table-responsive">
  <table class="table table-striped">
 <thead>
  <tr>
    <th>Name</th>
    <th>Action</th>
  </tr>
 </thead>
  <tbody>
    <tr>
        <td>
        <%= link_to user.name, user %>
        </td>
        <td>
        <% if current_user.admin? && !current_user?(user) %>
            <%= link_to "delete", user, method: :delete,
                                        data: confirm: "You sure?" , 
                                        class: "btn btn-sm btn-danger pull-right"%>
        <% end %>
        </td>
    </tr>
  </tbody>
 </table>
</div>

users_index定义的地方（我的Organization controller show函数）：

def show
 @organization = Organization.find(params[:id])
 @users_index = @organization.users
end

我在这里做错了什么？

【参考方案1】：

在您的组织显示页面中，将表格代码放在渲染行周围

    <div class="panel-body panel-height">
      <table class="table table-striped table-responsive">
       <thead>
        <tr>
          <th>Name</th>
          <th>Action</th>
        </tr>
       </thead>
       <tbody>
           <%= render partial: "users_index", collection: @users_index, as: :user %>
       </tbody>
      </table>
        <br></br>
    </div>

你的实用会像

<tr>
    <td>
    <%= link_to user.name, user %>
    </td>
    <td>
    <% if current_user.admin? && !current_user?(user) %>
        <%= link_to "delete", user, method: :delete,
                                    data: confirm: "You sure?" , 
                                    class: "btn btn-sm btn-danger pull-right"%>
    <% end %>
    </td>
</tr>

看，当你渲染一个集合时，Rails 会为集合中的每个项目寻找匹配并渲染它的部分，这就是为什么你为每个用户获取一个表，你想要的只是表中的一行每个用户，所以部分只包含表格行代码。