bootstrapTable動態添加表頭

寫在前面：

　　最近做到動態表頭關於日期的，這里簡單的記錄一下思路。

　　

　　動態表頭使用columns.push的方式把數據裝進去，如果需要做數據，則在前台使用js的方式做數據，比在后台方便許多(后台使用map也可以做的)如下:

　　　　　　　　　　var columns = [];

　　　　　　　　　　//做數據 每天的workitem數量 做成key-value的形式
　　　　　　　　　　　　//主要是對field做處理 做成key--value的形式 key對應着count名字，value對應着每天的工作項數量
                    for (let row of dataList.rows){ for (let item of row.personWorkItemNumVOList){ row['count' + row.personWorkItemNumVOList.indexOf(item)] = item.workitem_num; } }
                    //獲取日期的天數 只需要拿一個對象的日期來獲取即可
                    var dateSize = 0;
                    if(dataList.rows.length > 0){
                        dateSize = dataList.rows[0].personWorkItemNumVOList.length;
                    }

                    //console.log("date size---" + dateSize);
　　　　　　　　　　　　//遍歷  有多少個日期就動態添加多少個日期表頭
                    if (dateSize != null && dateSize > 0) {
                        for (var i=0;i<dateSize;i++) {
                            columns.push( {
　　　　　　　　　　　　　　　　　　　　　　//這里是對應的每天的工作項數量 由於上面對數據做了處理已經將每天的工作項數量 添加在count里面了 這里就直接使用 field: "count"+i,
　　　　　　　　　　　　　　　　　　　　　　//動態的表頭列 這里是日期 title: "<span class='tableHeader'>" + dataList.rows[0].personWorkItemNumVOList[i].recordDate + "</span>",
                                    valign: "middle",
                                    align: "center",
                                }
                            );
                        }

                    }

                    $('#table2').bootstrapTable({
                       ......
                        //動態加載表頭
                        columns: columns,
                       ......

                    });

　　其中dataList是后台返回的數據:

dataList:-------
{
"total":1,
"rows":[
{
    "bUnitId":1,"bUnitName":"(武漢)DTSA","depId":4,"depName":"SM",
    "divId":1,"divName":"R&D/DPD","extendHours":-8.600000000000001,"funcId":15,"funcName":"SDM","leaveHours":0,
    "missHours":0,"nonProjectHours":0,"perCode":"W0102537","perName":"丁莎",
    "personWorkItemNumVOList":[
        {"perCode":"W0102537","recordDate":"2019-08-13","workitem_num":1},
        {"perCode":"W0102537","recordDate":"2019-08-14","workitem_num":1},
        {"perCode":"W0102537","recordDate":"2019-08-15","workitem_num":2}
    ],
    "projectHours":24,"recordWorkHours":24,"totalWorkHours":33
}
]
}

　　效果圖