Bootstrap-table表格联动

【应用背景】

表格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.');
                           }
               })
            }.....

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值