動態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;
    }