jq 如何根据后台返回的json数据生成如图所示的table表格
后台给定的如下的返回字段，生成如图所示的table表格
{
"code": 200,
"message": "操作成功",
"data":
{
"baseData": {
"taskInfoId": "任务ID",
"taskName": "任务名称"
},
"headData": [
{
"name": "动态表头1",
"unit": "",
"mergeFlag": "是否合并"
},
{
"name": "动态表头2",
"unit": "单位",
"mergeFlag": "是否合并"
},
{
"name": "动态表头3",
"unit": "",
"mergeFlag": "是否合并"
},
{
"name": "动态表头4",
"unit": "单位",
"mergeFlag": "是否合并"
},
{
"name": "动态表头5",
"unit": "",
"mergeFlag": "是否合并"
}, {
"name": "动态表头6",
"unit": "单位",
"mergeFlag": "是否合并"
}
],
"bodyData": {
"current": 1,
"rowCount": 10,
"rows": [
["固定列1的值","固定列2的值","固定列3的值","固定列4的值","固定列5的值","动态列1的值","动态列2的值","动态列3的值","动态列4的值","动态列5的值"],
["固定列1的值","固定列2的值","固定列3的值","固定列4的值","固定列5的值","动态列1的值","动态列2的值","动态列3的值","动态列4的值","动态列5的值"]
],
"total": 2
}
}
}
1.黄色部分表格的表头是写死固定的 灰色部分的表头是根据后台的接口返回的
2.灰色部分的动态表头 要根据 unit的值是否存在 进行合并单元格
3.bodyData 里面row的数据 是整行的数据 包含固定 跟 动态的 要怎么判断渲染到相对的行里
目前写的代码 row里面的数据都渲染到了一行上 怎么判断数据要渲染到下一行上 如何合并单元格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div class="container-fluid" id="demo">
<div class="row h-100 justify-content-center pt-5">
<div class="card" style="width:88rem;height: 30rem">
<div class="card-body">
<table class="table table-sm table-striped">
<thead v-if="v_table_data.headData">
<tr id="thred">
<th scope="col">固定表头1</th>
<th scope="col">固定表头2</th>
<th scope="col">固定表头3</th>
<th scope="col">固定表头4</th>
<th scope="col">固定表头5</th>
</tr>
<tr>
<td>(m)</td>
</tr>
</thead>
<tbody>
<!-- <tr v-for="row in v_table_data.bodyData.rows">
<td v-for="val in row">{{val}}</td>
</tr> -->
<tr id="tableData"></tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="../js/ajax.js"></script>
<script src="../js/jquery.min.js"> </script>
<script>
window.onload = function () {
new AjaxRequest({
type: "get",
url: "../data/table.json",
param: "",
isShowLoader: true,
dataType: "",
callBack: function (res) {
console.log(res.data);
console.log(res.data.headData.length);
for (let index = 0; index < res.data.headData.length; index++) {
if (res.data.headData[index].unit) {
var html = '';
html += '<th scope="col" colspan="2">' + res.data.headData[index].name +
'</th>';
var str = '';
str += '<td>' + res.data.headData[index].unit + ' </td>'
$('#thred').last().append(html);
// $('#thred').next().last().append(str);
} else {
var html = '';
html += '<th scope="col">' + res.data.headData[index].name +
'</th>';
$('#thred').last().append(html);
}
}
for (let index = 0; index < res.data.bodyData.rows.length; index++) {
$.each(res.data.bodyData.rows[index],function(index,item){
var html = '';
html += '<td scope="col">' + item +
'</td>';
$('#tableData').last().append(html);
})
}
}
});
}
</script>
</body>
</html>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
个人解决。。。。。。。