时间戳

首页 > 解决方案 > 添加新行后刷新引导表

jquery - 添加新行后刷新引导表

问题描述

我在启用了 detailView 的表上应用了引导表

$("table#orders").bootstrapTable({detailView: true});

它工作正常并显示加号（+）图标/按钮以查看详细信息。现在我正在向该表动态添加一个新行

$('table#orders').append('<tr><td>Some Date</td></tr>');

替换行后，它不显示新添加行的详细视图图标/按钮

尝试刷新后，它显示详细视图图标，但不显示新添加行的内容，而是显示旧行

$('table#orders').bootstrapTable('refresh');

关于这个问题的任何解决方法？

标签： jquerybootstrap-table

解决方案

Bootstrap-Table作为附加行的 API -

$('#table').bootstrapTable('append',{ key: 'Data'});

工作演示 -

$('#table').bootstrapTable({
  detailView: true,
  detailFormatter: detailFormatter
});
$('#add').click(() => {
  $('#table').bootstrapTable('append', {
    0: 'Some Date'
  });
});

function detailFormatter(index, row) {
  return row[0];
}
<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
  <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.css">
  <link href="https://unpkg.com/multiple-select@1.5.2/dist/multiple-select.min.css" rel="stylesheet">
</head>

<div class="container">
  <h3>Bootstrap-table</h3>
  <button id="add">
  Add
  </button>
  <table id="table">
    <thead>
      <tr>
        <th>Name</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>First</td>
      </tr>
      <tr>
        <td>Second</td>
      </tr>
    </tbody>
  </table>

  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <script src="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.js"></script>
  <script src="https://unpkg.com/bootstrap-table@1.16.0/dist/extensions/filter-control/bootstrap-table-filter-control.min.js"></script>
  <script src="https://unpkg.com/multiple-select@1.5.2/dist/multiple-select.min.js"></script>

推荐阅读