bootstrap-table动态绑定字段

发表于 | 分类于 | | 阅读次数:
一个web端提交查询sql并返回表格的例子

一个web端提交查询sql并返回表格的例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<script>
//将数据通过ajax提交给后端进行检查
function sqlquery() {
var columns = [];
var sqlContent = $("#sql_content");
var dbName = $("#db_name");
$.ajax({
    type: "post",
    url: "/do_sqlquery/",
    dataType: "json",
    data: {
        sql_content: sqlContent.val(),
        db_name: dbName.val()

    },
    complete: function () {
        $('input[type=button]').removeClass('disabled');
        $('input[type=button]').addClass('btn');
        $('input[type=button]').prop('disabled', false);
    },
    success: function (data) {
        if (data.status == 0) {
            var result = data.data;
            if (result['Error']){
                alertStyle = "alert-danger";
                $('#query_result').bootstrapTable('destroy').bootstrapTable({
                    columns: [{
                        field: 'error',
                        title: 'Error'
                    }],
                    data:[{
                        error: result['Error']
                    }]
                })
            }
            else if (result['column_list']){
                //获取要动态生成的列
                $.each(result['column_list'], function (i,column) {
                    columns.push({ "field": i ,"title": column});
                });
                //初始化table
                $('#query_result').bootstrapTable('destroy').bootstrapTable({
                    data: result['rows'],
                    columns: columns,
                    showColumns: true,
                    striped: true,
                    pagination: true,
                    pageSize:10
                })
            }
            //填充内容后展现出来
            $("#sqlquery-result").show();
        } else {
            alert("status: " + data.status + "\nmsg: " + data.msg);
        }
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
        alert(errorThrown);
    }
});
}
</script>