Question

我使用bootstrap和jquery bootgrid，一切都还可以。然后我开始了一个新项目并在那里使用了bootgrid。我得到一个奇怪的事情：在网格的控制面板上，刷新按钮比其他按钮小。但我没有改变bootgrid中的任何配置，都是默认配置。

enter image description here

为什么它可以以及如何修复它？这个按钮是自动生成的，我没有想法...

UPD

JS：

$(function () {
    var autoOutGrig = $("#autoOutGrig").bootgrid({
        navigation: 3,
        ajax: true,
        url: "controllers/getListFiles",
        post: function () {
            return {
                type: 'req',
                expanded: $('#exp').text()
            };
        },
        responseHandler: function (response)
        {
            return response.data;
        }           
    });

HTML：

<div id="autoOut" class="tab-pane fade in active">
    <span id="exp" style="display: none;"></span>
    <h3>Auto OUT</h3>
    <table id="autoOutGrig" class="table table-condensed table-hover table-striped">
        <thead>
            <tr>
                <th data-column-id="date" class="col-md-3">Дата/Время</th>
                <th data-column-id="expander" data-formatter="expander" class="col-md-1">Список</th>
                <th data-column-id="file" class="col-md-4">Имя файла</th>
                <th data-column-id="uid" class="col-md-4">UID</th>
                <th data-column-id="accReqId" class="col-md-2">AccountsRequestId</th>
                <!--                    <th data-column-id="respType" class="col-md-2">Тип ответа</th>
                                    <th data-column-id="respName" class="col-md-2">Имя ответа</th>-->
            </tr>
        </thead>
    </table>
</div>

UPD：来自chrome的样式。

enter image description here

UPD2：以下答案中的代码不能在我的服务器上运行。但它在堆栈snippset上工作正常！

＆＃13;

<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="http://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.1.4/jquery.bootgrid.css" rel="stylesheet"/>

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.1.4/jquery.bootgrid.js"></script>


<script>
 $(function () {
      var testGrid = $("#testGrid").bootgrid({
        navigation: 3,
        ajax: true,
        url: "controllers/getListFiles",
        post: function () {
          return {
            type: 'req',
            expanded: $('#exp').text()
          };
        },
        responseHandler: function (response)
        {
          return response.data;
        }
      });
    });
</script>



    <div id="autoOut" class="tab-pane fade in active">
      <span id="exp" style="display: none;"></span>
      <h3>Auto OUT</h3>
      <table id="testGrid" class="table table-condensed table-hover table-striped">
        <thead>
          <tr>
            <th data-column-id="date" class="col-md-3">Дата/Время</th>
            <th data-column-id="expander" data-formatter="expander" class="col-md-1">Список</th>
            <th data-column-id="file" class="col-md-4">Имя файла</th>
            <th data-column-id="uid" class="col-md-4">UID</th>
            <th data-column-id="accReqId" class="col-md-2">AccountsRequestId</th>
          </tr>
        </thead>
      </table>
    </div>

＆＃13;

Answer 1

我确保您正在为项目提供最新的CSS库

您提供的代码似乎正常：

＆＃13;

$(function () {
  var autoOutGrig = $("#autoOutGrig").bootgrid({
    navigation: 3,
    ajax: true,
    url: "controllers/getListFiles",
    post: function () {
      return {
        type: 'req',
        expanded: $('#exp').text()
      };
    },
    responseHandler: function (response)
    {
      return response.data;
    }           
  });
});

＆＃13;

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.1.4/jquery.bootgrid.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.1.4/jquery.bootgrid.js"></script>


<div id="autoOut" class="tab-pane fade in active">
  <span id="exp" style="display: none;"></span>
  <h3>Auto OUT</h3>
  <table id="autoOutGrig" class="table table-condensed table-hover table-striped">
    <thead>
      <tr>
        <th data-column-id="date" class="col-md-3">Дата/Время</th>
        <th data-column-id="expander" data-formatter="expander" class="col-md-1">Список</th>
        <th data-column-id="file" class="col-md-4">Имя файла</th>
        <th data-column-id="uid" class="col-md-4">UID</th>
        <th data-column-id="accReqId" class="col-md-2">AccountsRequestId</th>
      </tr>
    </thead>
  </table>
</div>

＆＃13;

Answer 2

There are problems with class name. You have to change class names in "jquery.bootgrid.js" file. So, You can get refresh, search and menu drop down icon.

更改1：对于“刷新”按钮图标。请替换＆＃34; jquery.bootgrid.js＆＃34;

中的给定代码

actionButton: "<button class=\"btn btn-default\" type=\"button\" title=\"{{ctx.text}}\"><span class=\"icon glyphicon glyphicon-refresh\"></span></button>"

而不是

actionButton: "<button class=\"btn btn-default\" type=\"button\" title=\"{{ctx.text}}\">{{ctx.content}}</button>"

更改2：搜索图标。请替换＆＃34; jquery.bootgrid.js＆＃34;

中的给定代码

search: "<div class=\"{{css.search}}\"><div class=\"input-group\"><span class=\"icon glyphicon input-group-addon glyphicon-search\"></span> <input type=\"text\" class=\"{{css.searchField}}\" placeholder=\"{{lbl.search}}\" /></div></div>"

而不是

search: "<div class=\"{{css.search}}\"><div class=\"input-group\"><span class=\"{{css.icon}} input-group-addon {{css.iconSearch}}\"></span> <input type=\"text\" class=\"{{css.searchField}}\" placeholder=\"{{lbl.search}}\" /></div></div>"

Answer 3

将此css添加到您的代码中，希望它能修复刷新按钮的大小。

<style>
    .glyphicon-refresh{line-height:1.42857;}
</style>

此致

Bootgrid刷新按钮不是大小

3 个答案: