如何根据下述接口数据,然后再layui table中渲染出如下效果?
日期列和周期转为行,且为表头,日期和周期根据接口的数据来源是动态的,可能是一个月也可能是两个月。
实现如下图效果:
{
"code": 0,
"msg": "success",
"count": 2,
"data": [
{
"localid": "9001",
"name": "LEE",
"shift": "A",
"score": "1",
"datetime": "2023-11-30",
"week": "周四"
},
{
"localid": "90017",
"name": "ZHANG",
"shift": "B",
"score": "1",
"datetime": "2023-11-30",
"week": "周四"
},{
"localid": "9001",
"name": "LEE",
"shift": "A",
"score": "0",
"datetime": "2023-11-29",
"week": "周三"
},
{
"localid": "90017",
"name": "ZHANG",
"shift": "B",
"score": "1",
"datetime": "2023-11-29",
"week": "周三"
},{
"localid": "9001",
"name": "LEE",
"shift": "A",
"score": "1",
"datetime": "2023-11-28",
"week": "周二"
},
{
"localid": "90017",
"name": "ZHANG",
"shift": "B",
"score": "1",
"datetime": "2023-11-28",
"week": "周二"
}
]
}
前端layui table如何拼接cols?
```php
$.ajax({
url: 'data.php',
type: 'get',
dataType: 'json',
success: function(res) {
var colsConfig = [];
//如何拼接,实现localid,name,shift为左侧固定列,datetime和week值为行表头,score为其对应值
// 渲染表格
var myTable2 = table.render({
elem: '#myTable2',
height: $(document).height() - $('#myTable2').offset().top - 20,
toolbar: '#toolbarDemo',
totalRow:true,
cols: [colsConfig],
data: res.data,
done: function (res,curr,count) {
soulTable.render(this)
}
});
}
});
```