接到需要渲染表格全部内容的同时,根据相同分类合并行达到下面的效果
难点在于layui模板语言代码阅读性不高,html 的table合并仅第一行rowspan后续不需要添加该列,需要进行数量判断,有多行或者仅一行的判断.
1首先对数据进行分组
js:
let groupList =groupBy(res.data.AIKuQuoteList, function (item) {
return [item.报价分类];//按照name进行分组
});
function groupBy(array, f)
{
debugger;
const groups = {};
array.forEach(function (o) { //注意这里必须是forEach 大写
const group = JSON.stringify(f(o));
groups[group] = groups[group] || [];
groups[group].push(o);
});
return Object.keys(groups).map(function (group) {
return groups[group];
});
}
2.分组之后会以分组字段的值为键,组成一个层级结构,进行渲染
关键在于集中查看代码是否缺漏,其次是三个判断,分组里数量大于1,是第一个则渲染rowspan,大于1不是0下标则不渲染合并列,其他情况正常渲染
<tbody class="thead">
{{# layui.each(d, function(index, item){ }}
{{# var slength=item.length; }}
{{# layui.each(item,function (i,it){ }}
{{# if(index!=d.length-1&&it.lineType=="明细"){ }}
{{# if(slength>1&&i==0){ }}
<tr>
<td>{{ it.空间名称 }}</td>
<td>{{ it.产品名称 }}</td>
<td rowspan='{{slength}}'>{{ it.报价分类 }}</td>
<td>{{ it.明细序号 }}</td>
<td>{{ it.部件名称 }}</td>
<td>{{ it.宽 }}</td>
<td>{{ it.深 }}</td>
<td>{{ it.高 }}</td>
<td>{{ it.数量 }}</td>
<td>{{ it.材料 }}</td>
<td>{{ it.颜色 }}</td>
<td>{{ it.单位 }}</td>
<td>{{ it.单位数 }}</td>
<td>{{ it.工艺费 }}</td>
<td>{{ it.单价 }}</td>
<td>{{ it.金额 }}</td>
<td>{{ it.折扣 }}</td>
<td>{{ it.折后金额 }}</td>
</tr>
{{# }else if (slength>1){ }}
<tr>
<td>{{ it.空间名称 }}</td>
<td>{{ it.产品名称 }}</td>
<td>{{ it.明细序号 }}</td>
<td>{{ it.部件名称 }}</td>
<td>{{ it.宽 }}</td>
<td>{{ it.深 }}</td>
<td>{{ it.高 }}</td>
<td>{{ it.数量 }}</td>
<td>{{ it.材料 }}</td>
<td>{{ it.颜色 }}</td>
<td>{{ it.单位 }}</td>
<td>{{ it.单位数 }}</td>
<td>{{ it.工艺费 }}</td>
<td>{{ it.单价 }}</td>
<td>{{ it.金额 }}</td>
<td>{{ it.折扣 }}</td>
<td>{{ it.折后金额 }}</td>
</tr>
{{# }else{ }}
<tr>
<td>{{ it.空间名称 }}</td>
<td>{{ it.产品名称 }}</td>
<td>{{ it.报价分类 }}</td>
<td>{{ it.明细序号 }}</td>
<td>{{ it.部件名称 }}</td>
<td>{{ it.宽 }}</td>
<td>{{ it.深 }}</td>
<td>{{ it.高 }}</td>
<td>{{ it.数量 }}</td>
<td>{{ it.材料 }}</td>
<td>{{ it.颜色 }}</td>
<td>{{ it.单位 }}</td>
<td>{{ it.单位数 }}</td>
<td>{{ it.工艺费 }}</td>
<td>{{ it.单价 }}</td>
<td>{{ it.金额 }}</td>
<td>{{ it.折扣 }}</td>
<td>{{ it.折后金额 }}</td>
</tr>
{{# } }}
{{# } }}
{{# }); }}
{{# }); }}
<tr>
<td colspan="16"></td>
<td>合计</td>
<td>{{ d[d.length-2][0].总计 }}</td>
</tr>
</tbody>