文章/答案/技术大牛

发布

社区首页 >问答首页 >添加新行后刷新Bootstrap-table

问添加新行后刷新Bootstrap-table
EN

Stack Overflow用户

提问于 2021-07-28 21:15:14

回答 1查看 53关注 0票数 0

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

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

它工作正常，并在详细视图中显示加号(+)图标/按钮。现在，我正在向该表中动态添加一个新行

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

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

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

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

在这个问题上有什么解决方法吗？

jquery

bootstrap-table

回答 1

Stack Overflow用户

发布于 2021-07-28 22:37:58

Bootstrap-Table作为一个API来追加行-

$(‘#table’).bootstrapTable(‘追加’，{ key：‘数据’})；

工作演示-

$('#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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68561124

复制

相似问题

问添加新行后刷新Bootstrap-table
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问添加新行后刷新Bootstrap-tableEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问添加新行后刷新Bootstrap-table
EN