Question

在我通过Ajax调用CSS之后，我无法将CSS加载到bootstrap-table。

这个表被Ajax附加到我的视图中，用于每次点击事件，但是bootstrap-table CSS没有被加载到每一个：

<div id="sala_2">
  <h3>Sala 2</h3>
  <table id="tb_sala_2"
     data-toggle="table"
     data-toolbar="#toolbar"
     data-click-to-select="true"
     data-single-select="true">
    <thead>
      <tr>
        <th data-field="state" data-checkbox="true" data-halign="center" data-align="center"></th>
        <th data-field="id" data-halign="center" data-align="center">ID</th>
        <th data-field="cargo_id" class="hidden_field" data-halign="center" data-align="center">Cargo ID</th>
        <th data-field="cargo" data-halign="center" data-align="center">Cargo</th>
        <th data-field="quantidade_de_candidatos" data-halign="center" data-align="center">Quantidade de candidatos</th>
      </tr>
    </thead>
    <tbody>
        <% i = 0 %>
        <% @cargos.each do |cargo| %>
          <tr>
            <td></td>
            <td><%= i %></td>
            <% i = i + 1 %>
            <td class="hidden_field"><%= cargo.id %></td>
            <td><%= cargo.nome %></td>
            <td class="quantidade_de_candidatos"> 0 </td>
          </tr>
       <% end %>
   </tbody>
 </table>
</div>

的application.js：

//= require jquery
//= require jquery_ujs
//= require bootstrap-table
//= require turbolinks  
//= require_tree .

Application.css：

*= require bootstrap-table
*= require_tree .
*= require_self

观察：第一次加载页面时，右侧加载了bootstrap-table CSS。当我使用ajax附加另一个表时会发生问题。所以，我认为问题在于rails运行加载资产的方式。

Answer 1

您可以异步尝试使用loadCss.js lib。

git https://github.com/filamentgroup/loadCSS

用法：loadCSS( "path/to/mystylesheet.css" );

Answer 2

我能够解决在Ajax成功函数中调用此方法的问题：

$('#table').bootstrapTable();

使用它，填充了gem中的默认方法和样式。

ajax调用后没有加载bootstrap-table css

2 个答案: