【应用背景】
表格1中勾选一条记录后,表格2中根据表格1中勾选的数据进行过滤
html:
<div class="container-fluid">
<div class="row" style="justify-content: center;">
<!-- first card -->
<div class="col-md-4 column" >
<div>
<table id="Table1"
class="table table-sm table-condensed"
data-url="/files/getxx"
...
>
<thead class=" text-left table-info">
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="aaa">aaa</th>
<th data-field="bbb" data-visible="false">bbb</th>
</tr>
</thead>
</table>
</div>
</div>
<!-- second card -->
<div class="col-md-4 column" >
<div' >
<table id="Table2"
data-classes="table table-hover" data-toggle="table"
data-url="/files/getxxxByxx"
...
>
<thead class="table-info text-left">
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="ccc" data-visible="true">ccc</th>
<th data-field="ddd" data-visible="true">ddd</th>
</tr>
</thead>
</table>
</div>
</div>
Javascript:
<script>
$(function() {
var $table = $('#platformTable')
var checkedCount = 0; // 初始化选中的复选框数量
$table.on('check.bs.table uncheck.bs.table check-all.bs.table uncheck-all.bs.table', function (e, rows) {
var selections = $table.bootstrapTable('getSelections')
checkedCount = $table.bootstrapTable('getSelections').length;
if (checkedCount >= 1) {
// console.log('被选中了!',checkedCount,selections[0].profile_name);
$.ajax({
url: '/files/getxxByxx',
headers:{'X-CSRFToken':'{{csrf_token}}','Content-Type': 'application/json'},
type: 'POST',
data: JSON.stringify({ "request_data": selections}),
processData: false,
contentType: false,
dataType: "json",
success: function(response) {
$('#Table2').bootstrapTable('load',response); //重新load表格2内容
},
error: function() {
alert('An error occurred.');
}
})
}.....