如何解决添加新行后刷新引导表
我在启用了 detailView 的表上应用了引导表
$("table#orders").bootstrapTable({detailView: true});
它工作正常并显示加号(+)图标/按钮以进行详细视图。 现在我正在向该表中动态添加一个新行
$('table#orders').append('<tr><td>Some Date</td></tr>');
替换行后,它不会显示新添加行的详细信息视图图标/按钮
尝试刷新后,显示详细视图图标,但不显示新添加行的内容,而是显示旧行
$('table#orders').bootstrapTable('refresh');
是否有解决此问题的方法?
解决方法
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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。