Question

我想覆盖jQuery Bootgrid的特定样式设置 - 但我似乎无法做到这一点。文档没有提供示例，它只表示＆＃34;所有CSS类都可以分别在初始化时设置和覆盖。＆＃34;并显示可以覆盖的样式元素列表。

http://www.jquery-bootgrid.com/Documentation#styling

我尝试了以下内容：

$('#divMain').bootgrid({
  styling: {
      pagination: 'pagination pagination-sm'
  }
});

但没有成功。

有谁知道如何实现这个目标？

Answer 1

该属性应为css而不是styling

$('#divMain').bootgrid({
    css: {
        pagination: 'pagination pagination-sm'
    }
});

$("#grid-basic").bootgrid({
  css: {
    pagination: 'pagination pagination-sm'
  }
});

<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap-theme.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.2.0/jquery.bootgrid.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.2.0/jquery.bootgrid.js"></script>

<table id="grid-basic" class="table table-condensed table-hover table-striped">
  <thead>
    <tr>
      <th data-column-id="id" data-type="numeric">ID</th>
      <th data-column-id="sender">Sender</th>
      <th data-column-id="received" data-order="desc">Received</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>10238</td>
      <td>eduardo@pingpong.com</td>
      <td>14.10.2013</td>
    </tr>
    <tr>
      <td>10243</td>
      <td>eduardo@pingpong.com</td>
      <td>19.10.2013</td>
    </tr>
    <tr>
      <td>10248</td>
      <td>eduardo@pingpong.com</td>
      <td>24.10.2013</td>
    </tr>
    <tr>
      <td>10253</td>
      <td>eduardo@pingpong.com</td>
      <td>29.10.2013</td>
    </tr>
    <tr>
      <td>10234</td>
      <td>lila@google.com</td>
      <td>10.10.2013</td>
    </tr>
    <tr>
      <td>10239</td>
      <td>lila@google.com</td>
      <td>15.10.2013</td>
    </tr>
    <tr>
      <td>10244</td>
      <td>lila@google.com</td>
      <td>20.10.2013</td>
    </tr>
    <tr>
      <td>10249</td>
      <td>lila@google.com</td>
      <td>25.10.2013</td>
    </tr>
    <tr>
      <td>10237</td>
      <td>robert@bingo.com</td>
      <td>13.10.2013</td>
    </tr>
    <tr>
      <td>10242</td>
      <td>robert@bingo.com</td>
      <td>18.10.2013</td>
    </tr>
    <tr>
      <td>10247</td>
      <td>robert@bingo.com</td>
      <td>23.10.2013</td>
    </tr>
    <tr>
      <td>10252</td>
      <td>robert@bingo.com</td>
      <td>28.10.2013</td>
    </tr>
    <tr>
      <td>10236</td>
      <td>simon@yahoo.com</td>
      <td>12.10.2013</td>
    </tr>
    <tr>
      <td>10241</td>
      <td>simon@yahoo.com</td>
      <td>17.10.2013</td>
    </tr>
    <tr>
      <td>10246</td>
      <td>simon@yahoo.com</td>
      <td>22.10.2013</td>
    </tr>
    <tr>
      <td>10251</td>
      <td>simon@yahoo.com</td>
      <td>27.10.2013</td>
    </tr>
    <tr>
      <td>10235</td>
      <td>tim@microsoft.com</td>
      <td>11.10.2013</td>
    </tr>
    <tr>
      <td>10240</td>
      <td>tim@microsoft.com</td>
      <td>16.10.2013</td>
    </tr>
    <tr>
      <td>10245</td>
      <td>tim@microsoft.com</td>
      <td>21.10.2013</td>
    </tr>
    <tr>
      <td>10250</td>
      <td>tim@microsoft.com</td>
      <td>26.10.2013</td>
    </tr>
  </tbody>
</table>

Answer 2

导航（或分页，如果您愿意）栏由按钮元素组成，其样式通过paginationButton css属性处理。

而不是：

$('#divMain').bootgrid({
    styling: {
    pagination: 'pagination pagination-sm'
    }
});

请试试这个：

$('#divMain').bootgrid({
    css: {
        paginationButton: 'btn-sm'
    }
});

有关更多设置：

$('#divMain').bootgrid({
    css: {
        paginationButton: 'btn-info btn-sm'
    }
});

但是，您会注意到，对于最后一个示例，鼠标悬停时的按钮外观不符合要求。它可能需要一些css改进，否则......

jQuery Bootgrid样式如何覆盖css类

2 个答案: