在开发过程中 我们从后台获取数据绑定list集合 但是我们需要实现跨行跨列 的表格。
难点:
属性拼接 th:class=" 'type_' +${var.getOrderType()}"使用‘+’;
获取属性值 td[class^='type_']
错误想法:
我们第一个反应就是在td标签中rowspan。这个做法是错误的 他会导致数据错位,因为你每次都会循环同样一个<td rowspan='3'>
你就会把位置占用 导致成为一个直角梯形的样子
正确的做法是:
1、不在html页面中写 <td rowspan='3'>。设置一个class即可。<td class='type_'+'#{item.getType()}'>
2、引入js。获取class对象的td的值 通过循环判断两个值是否相等 如果相等,就使用修改(attr)这个属性,将class修改成rowspan 并判断这个相等的值的个数 作为rowspan的value。在前面最好做一个判断value>1,可以提高效率