动态Bootstrap Table 表格

动态Bootstrap table ，表格头为动态获取

先在body标签中加入一个空 div

<div class="col-xs-12" id="singlelast">
</div>

　　

JS中加入动态获取的表格头JSON格式数据，进行添加

function load() {
        var date = $("#date").val();
        var year = "2019";
        var month = "8";
        $("#singlelast").empty();
        $("#singlelast").append("<table id='tablesinglelast'></table>")
        var appendPos = $("#tablesinglelast");

　　　　　　// 添加表格头前几列
        appendPos.append("<thead><tr><th data-field='OrderId' rowspan='1' id='OrderId' data-valign='middle' data-align='center'>发运地</th>" +
            "<th data-field='PN' data-valign='middle' rowspan='1' data-align='center'>物料号</th>" +
            "<th data-field='Factory' data-valign='middle' rowspan='1' data-align='center'>物料说明</th>" +
            "<th data-field='CustomerItem' data-valign='middle' rowspan='1' data-align='center'>Customer Item</th></tr><tr></tr></thead > ");

      // 这里是表格头后几列
        for (var i = 0; i < count; i++) {
            var appendPos2 = $("#tablesinglelast").children().eq(0).children().eq(0).children().eq(3 + i);            
            appendPos2.after("<th data-valign='middle' colspan='1'  data-align='center' data-field='" + Data[i].FirstDayOfWeek + "'>" + Data[i].FirstDayOfWeek + "</th>");
        }

        readyTable();
        getAttendanceResult();
    }

function readyTable() {
        $('#tablesinglelast').bootstrapTable({//bootstraptable 插件
            pageNumber: 1,                       //初始化加载第一页，默认第一页
            pageSize: 10,                       //每页的记录行数（*）
            pageList: [10, 20, 30],
            pagination: true,                   //是否显示分页（*）
            sortable: true,                     //是否启用排序
            sortOrder: 'asc',
            showExport: true,                     //是否显示导出
            exportDataType: 'all',
            search: true,
            //detailView: true,//父子表
            //onExpandRow: function (index, row, $detail) {
            //    oInitInitSubTable(index, row, $detail);
            //}
        });
    }

function getAttendanceResult() {
        $.ajax({
            type: "GET",
            url: "/Manage/ShipPartsData", //ShipPartsData
            dataType: "json",
            success: function (msg) {
                
                var data = bbb(msg);
                //console.log(data)
                var testJson = eval("(" + data + ")"); // string格式转换成json对象  
                $('#tablesinglelast').bootstrapTable('load', testJson);
            },
            error: function () {
                alert("获取发运数据失败");
            }
        });
        
    }

 

// 转换成需要的string格式
function bbb(data) {
        var temp = "[";
        for (var j = 0; j < data.length; j++) {

            temp += "{'OrderId':" + "'" + data[j].OrderId + "'" + ",'PN':" + "'" + data[j].PN + "'" + ",'Factory':" + "'" + data[j].Factory + "'";
            for (var i = 0; i < data[j].WorkingItem.length; i++) {
                temp = temp + ",'" + data[j].WorkingItem[i].FirstDayOfWeek + "':" + "'" + data[j].WorkingItem[i].Quantity + "'";
            }
            if (j == data.length - 1) {
                temp += "}]";

            } else {
                temp += "},";
            }
            //alert(temp)

        }
       
        return temp;
    }