bootgrid（“附加”）和格式化程序的问题

Question

我正在尝试使用 jquery.bootgrid 的网格，但我无法生成命令按钮...

• 一开始，我通过网络方法获取数据……没问题。
• 然后我使用“追加”方法，很好。
• 但是，当应用“格式化程序”时不起作用

.

$.ajax({
  url: url,
  type: 'POST',
  dataType: "json",
  contentType: "application/json; charset=utf-8",
  data: JSON.stringify({ 'idPO': 1}),
  success: function (result) {
  if (result.d != null) {
    $("#grid-data").bootgrid({
       caseSensitive: false,
       selection: true,
       formatters: {
          "commands": function () {
             return "<button type=\"button\" class=\"btn btn-xs btn-default command-edit\" data-row-id=\"" + id + "\"><span class=\"fa fa-pencil\"></span></button> ";
             }
        }
     }).bootgrid("append", result.d);
  }
})

Answer 1

你的代码有问题

1. 您没有在函数中加载 id。 据了解，您必须在“查看为”按钮中查看格式化程序。

HTML

您应该在 th 标记内添加数据格式化程序。

 <th data-column-id="commands" data-formatter="commands">Commands </th>

JavaScript

您应该加载 json 或 id 值。 我为您的问题添加了工作片段。查看脚本和 Html，忘记依赖 CSS :)。

$("#grid-data").bootgrid({
  formatters: {
    "commands": function(column, row) {
      return "<button type=\"button\" class=\"btn btn-xs btn-default command-edit\" data-row-id=\"" + row.id + "\"><span class=\"fa fa-pencil\"></span></button> ";

    }
  }
});

.bootgrid-header,
.bootgrid-footer {
  margin: 15px 0;
}
.bootgrid-header a,
.bootgrid-footer a {
  outline: 0;
}
.bootgrid-header .search,
.bootgrid-footer .search {
  display: inline-block;
  margin: 0 20px 0 0;
  vertical-align: middle;
  width: 180px;
}
.bootgrid-header .search .glyphicon,
.bootgrid-footer .search .glyphicon {
  top: 0;
}
.bootgrid-header .search.search-field::-ms-clear,
.bootgrid-footer .search.search-field::-ms-clear,
.bootgrid-header .search .search-field::-ms-clear,
.bootgrid-footer .search .search-field::-ms-clear {
  display: none;
}
.bootgrid-header .pagination,
.bootgrid-footer .pagination {
  margin: 0 !important;
}
.bootgrid-header .actionBar,
.bootgrid-footer .infoBar {
  text-align: right;
}
.bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu,
.bootgrid-footer .infoBar .btn-group > .btn-group .dropdown-menu {
  text-align: left;
}
.bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu .dropdown-item,
.bootgrid-footer .infoBar .btn-group > .btn-group .dropdown-menu .dropdown-item {
  cursor: pointer;
  display: block;
  margin: 0;
  padding: 3px 20px;
  white-space: nowrap;
}
.bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu .dropdown-item:hover,
.bootgrid-footer .infoBar .btn-group > .btn-group .dropdown-menu .dropdown-item:hover,
.bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu .dropdown-item:focus,
.bootgrid-footer .infoBar .btn-group > .btn-group .dropdown-menu .dropdown-item:focus {
  color: #262626;
  text-decoration: none;
  background-color: #f5f5f5;
}
.bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu .dropdown-item.dropdown-item-checkbox,
.bootgrid-footer .infoBar .btn-group > .btn-group .dropdown-menu .dropdown-item.dropdown-item-checkbox,
.bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu .dropdown-item .dropdown-item-checkbox,
.bootgrid-footer .infoBar .btn-group > .btn-group .dropdown-menu .dropdown-item .dropdown-item-checkbox {
  margin: 0 2px 4px 0;
  vertical-align: middle;
}
.bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu .dropdown-item.disabled,
.bootgrid-footer .infoBar .btn-group > .btn-group .dropdown-menu .dropdown-item.disabled {
  cursor: not-allowed;
}
.bootgrid-table {
  table-layout: fixed;
}
.bootgrid-table a {
  outline: 0;
}
.bootgrid-table th > .column-header-anchor {
  color: #333;
  cursor: not-allowed;
  display: block;
  position: relative;
  text-decoration: none;
}
.bootgrid-table th > .column-header-anchor.sortable {
  cursor: pointer;
}
.bootgrid-table th > .column-header-anchor > .text {
  display: block;
  margin: 0 16px 0 0;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bootgrid-table th > .column-header-anchor > .icon {
  display: block;
  position: absolute;
  right: 0;
  top: 2px;
}
.bootgrid-table th:hover,
.bootgrid-table th:active {
  background: #fafafa;
}
.bootgrid-table td {
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bootgrid-table td.loading,
.bootgrid-table td.no-results {
  background: #fff;
  text-align: center;
}
.bootgrid-table th.select-cell,
.bootgrid-table td.select-cell {
  text-align: center;
  width: 30px;
}
.bootgrid-table th.select-cell .select-box,
.bootgrid-table td.select-cell .select-box {
  margin: 0;
  outline: 0;
}
.table-responsive .bootgrid-table {
  table-layout: inherit !important;
}
.table-responsive .bootgrid-table th > .column-header-anchor > .text {
  overflow: inherit !important;
  -ms-text-overflow: inherit !important;
  -o-text-overflow: inherit !important;
  text-overflow: inherit !important;
  white-space: inherit !important;
}
.table-responsive .bootgrid-table td {
  overflow: inherit !important;
  -ms-text-overflow: inherit !important;
  -o-text-overflow: inherit !important;
  text-overflow: inherit !important;
  white-space: inherit !important;
}
@font-face {
  font-family: FontAwesome;
  src: url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.eot?#iefix) format('eot'), url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.woff) format('woff'), url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.ttf) format('truetype'), url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.svg#FontAwesome) format('svg');
}
.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.fa-pencil:before {
  content: "\f040";
}
.fa-trash-o:before {
  content: "\f014";
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://www.scic.com/files/eddie/jquery.bootgrid.js"></script>
<table id="grid-data" data-toggle="bootgrid" columnSelection="true" 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>
      <th data-column-id="commands" data-formatter="commands" data-sortable="false">Commands</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>10238</td>
      <td>eduardo@pingpong.com</td>
      <td>14.10.201332</td>
    </tr>
    <tr>
      <td>102381</td>
      <td>eduardo1@pingpong.com</td>
      <td>14.10.20135</td>
    </tr>
    <tr>
      <td>1023823</td>
      <td>eduardo2@pingpong.com</td>
      <td>14.10.20134</td>
    </tr>
  </tbody>
</table>