thymeleaf html中后台循环list集合数据 js动态合并单元格的做法

在开发过程中 我们从后台获取数据绑定list集合 但是我们需要实现跨行跨列 的表格。

难点:

属性拼接 th:class=" 'type_' +${var.getOrderType()}"使用‘+’;

获取属性值  td[class^='type_']

错误想法:

我们第一个反应就是在td标签中rowspan。这个做法是错误的 他会导致数据错位,因为你每次都会循环同样一个

你就会把位置占用  导致成为一个直角梯形的样子

正确的做法是:

1、不在html页面中写 。设置一个class即可。

thymeleaf html中后台循环list集合数据 js动态合并单元格的做法_第1张图片

2、引入js。获取class对象的td的值  通过循环判断两个值是否相等  如果相等,就使用修改(attr)这个属性,将class修改成rowspan  并判断这个相等的值的个数 作为rowspan的value。在前面最好做一个判断value>1,可以提高效率

thymeleaf html中后台循环list集合数据 js动态合并单元格的做法_第2张图片

你可能感兴趣的:(其他)