bootstrapTable 的 refresh 带参数方法使用简单举例

以你之姓@ 2022-03-28 15:56 654阅读 0赞

本文就bootstrapTable **refresh** 方法**带传递参数**做简单举例说明。

下面代码中，一个table，一个button，单击button会触发刷新表格操作。

<!DOCTYPE html> <html lang="en">
    <head>
    <meta charset="utf-8">
    
    <link rel="stylesheet" href="../libs/bootstrap-table-v1.11.0/bootstrap.min.css">
    <link rel="stylesheet" href="../libs/bootstrap-table-v1.11.0/bootstrap-table.css">
    
    
    <script src="../libs/jQuery/jquery-1.8.3.min.js"></script>
    <script src="../libs/bootstrap-table-v1.11.0/bootstrap.min.js"></script>
    <script src="../libs/bootstrap-table-v1.11.0/bootstrap-table.js"></script>
    <script src="../libs/bootstrap-table-v1.11.0/bootstrap-table-zh-CN.js"></script>
    
    </head>
    
    <body>
    
    <table id="item_table"></table>
    <button id=refresh_button type="button">刷新</button>
    
    <script>
    
    $('#item_table').bootstrapTable({
        url: "http://local/data/?format=abc",
        columns: [{
            field: 'id',
            title: 'Item ID'
        }, {
            field: 'name',
            title: 'Item Name'
        }, {
            field: 'price',
            title: 'Item Price'
        }],
        data: [{
            id: 1,
            name: 'Item 1',
            price: '$1'
        }, {
            id: 2,
            name: 'Item 2',
            price: '$2'
        }]
    });
    
    
    $("#refresh_button").click(function (){
    
        var opt = {
            url: "http://local/data/?format=json",
            silent: true,
            query:{
                type:1,
                level:2
            }
        };
        //带参数 刷新
        $("#item_table").bootstrapTable('refresh', opt);
    
          //不带参数，仅刷新
    //    $("#item_table").bootstrapTable('refresh');
    });
    
    </script>
    
    </body>
    </html>

> refresh发出带参数的请求url为**（即会覆盖原有的旧参数）**  
> “[http://local/api/data/?format=json&type=1&level=2][http_local_api_data_format_json_type_1_level_2]”

[http_local_api_data_format_json_type_1_level_2]: http://local/api/data/?format=json&type=1&level=2