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 に答える