級聯兩個bootstrap-table。一張表顯示相關的數據,通過點擊這張表的某一行,傳過去對應的ID,刷新另外一張表。


二張表的代碼(我用的插件,大家可以去網上直接下載http://issues.wenzhixin.net.cn/bootstrap-table/):

<div class="container" style="float: left;width:500px;height: 341px">
      
        <div id="toolbar">
            <button id="remove" class="btn btn-danger" disabled=""> <i class="glyphicon glyphicon-remove"></i> Delete </button>
        </div>
        <table id="table" data-toolbar="#toolbar" data-search="true" 
               data-detail-formatter="detailFormatter" data-minimum-count-columns="2" data-show-pagination-switch="true"
               data-pagination="true" data-id-field="id" data-page-list="[10, 25, 50, 100, ALL]" data-show-footer="false"
               data-side-pagination="server" data-url="./system/Dealer_obtainMachAndName" data-response-handler="responseHandler">
        </table>
    </div>
    <!-- 右邊聯動部分 -->
    <div class="container" style="float: left;width:500px">
       <table id="tablelink" data-toolbar="#toolbar" 
               data-detail-formatter="detailFormatter" data-minimum-count-columns="2" 
               data-pagination="true" data-id-field="id" data-page-list="[10, 25, 50, 100, ALL]" data-show-footer="false"
               data-side-pagination="server" data-url="./system/Dealer_obtainAIllerMes" data-response-handler="responseHandler" 
               data-query-params="getPatientId"
        </table>
    </div>

箭頭所指處是我新添加的函數(注意不是寫成這樣data-query-params="getPatientId()"

然后給第一張表添加行點擊事件:

        $('#table').on('check.bs.table', function (e, row, $element) {
            // console.log(row, $element);
            //getPatientId();
            $('#tablelink').bootstrapTable('refresh',{url: "./system/Dealer_obtainAIllerMes"} );
        });

這里添加到插件對應模塊:

 

這樣每次點擊的時候 調用表2的refresh方法的同時然后把對應的ID傳過去,然后根據后台傳過來的數據更新該表。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM