如何實現BootStrapTable的動態表格

BootStrapTable的動態表格
https://blog.csdn.net/Nerver_77/article/details/82684393
在咱們構建BootStrapTable(下文中均稱：BsTable)，其中columns參數做爲表格列的內容存儲，咱們的需求是根據返回的數據動態的生成columns參數的內容。從而生成動態表格。

columns參數格式：相似下文

columns: {
    {
        field: 'Id',
        title: '編號',
    },{
        field: 'name',
        title: '名稱',
    },{
        field: 'sex',
        title: '性別',
        //自定義方法
        formatter: function (value) {
            if (value == 1) {
                return '男';
            } else if (value == 2) {
                retuen '女';
            }
        }
    },
}

所有代碼：

/**
     *  BsTable動態表格生成
     */
    function sqlExecute() {

        // var sql = $('#sql').val();
        // var connectInfo = $('#connectInfo').val();

        $('#DataQueryTable').bootstrapTable({
            ajax: function (request) {
                $.ajax({
                    type: "post",
                    url: prefix + "/list",
                    contentType: "application/json;charset=utf-8",
                    dataType: "json",
                    json: 'callback',
                    success: function (data) {
                        var json = data.rows;
                        // console.log(json);
                        var dynamicHeader = [];
                        dynamicHeader.push({
                            field: "state",
                            check: true
                        });

                        for (var i = 0; i < (Object.keys(json[0])).length; i++) {
                            var property = (Object.keys(json[0]))[i];
                            console.log(property);
                            dynamicHeader.push({
                                "title": property,
                                "field": property,
                                switchable: true,
                                sortable: true
                            });
                        }

                        // console.log(Object.keys(json[0]));

                        $('#DataQueryTable').bootstrapTable('destroy').bootstrapTable({
                            data: json,
                            toolbar: '#toolbar',
                            cache: false,
                            striped: true,
                            sidePagination: "client",
                            sortOrder: "desc",
                            pageSize: 25,
                            pageNumber: 1,
                            pageList: "[25, 50, 100, All]",
                            showToggle: true,
                            showColumns: true,
                            showExport: true,
                            height: 400,
                            exportDataType: "basic",
                            pagination: true,
                            strictSearch: true,
                            search: true,
                            columns: dynamicHeader
                        });
                    },
                    error: function () {
                        alert("SQL查詢錯誤，請輸入正確的SQL語句！");
                        location.reload();
                    }
                });
            }
        });
    };

<button type="button" class="btn btn-primary" onclick="sqlExecute()">
        <i class="fa fa-check"></i>&nbsp;SQL語句執行
    </button>
    <div class="row">
        <div class="col-sm-12 select-table table-striped">
            <table id="DataQueryTable"></table>
        </div>
    </div>