3

我想覆盖 jQuery Bootgrid 的特定样式设置 - 但是我似乎无法做到这一点。该文档没有提供示例，它仅说明“可以分别在初始化时设置和覆盖所有 CSS 类”。并显示可以被覆盖的样式元素列表。

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

我尝试了以下方法：

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

但没有成功。

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

4

2 回答 2

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>

于 2015-07-01T11:32:16.657 回答
0

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

代替：

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

请试试这个：

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

更多设置：

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

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

于 2015-09-22T07:31:49.620 回答