bootstarp table 列横向扩展（动态列）

来源：互联网发布：数据库接口文档模板编辑：程序博客网时间：2024/06/10 23:52

总结一下：首先数据库中查询出要显示的列，拼成表头；然后查询出要显示的数据，并绑定到table中，需要注意的是表头的filed值必须和data中的字段名相等，我这里采用了ArrayList中存储数组，以数组下表作为data中的字段名，所以表头中的filed也必须以0，1，2，3。。。来进行命名。方法貌似不是很smart？？？

<script type="text/javascript">    $(function () {        var questionColumns = [];        $.ajax({            url: "/esubjects/viewEsubjectsList",// 数据发送方式            type: "get",// 接受数据格式            dataType: "json",// 要传递的数据            data: 'data',            success: function (data) {                var mdata = data.data;                var t0 = {field: "0", title: "班级", align: "center"};                var num=mdata.length+1;                console.log(num);                questionColumns.push(t0);                for (var i = 0; i < mdata.length; i++) {                    var temp = {field: i+1, title: mdata[i].subjectname, align: "center"};//手动拼接columns                    questionColumns.push(temp);                }                var t1 = {field: num, title: "总分", align: "center"};                questionColumns.push(t1);                $('#class_mark').bootstrapTable('destroy');                $('#class_mark').bootstrapTable({                    url: "/report/queryRClassMark",         //请求后台的URL（*）                    method: 'post',                      //请求方式（*）//                    classes: 'table table-hdgw',                    dataType: "json",//                    contentType: 'application/json',//                    queryParams: {},//传递参数（*）                    columns: questionColumns,                })                ;            }        })    });</script>

html里面只需要放一个table就ok了：

<table class="table table-striped" id="class_mark" align="center"       striped="true" data-height="360" data-click-to-select="true"></table>

1 0