成果图:
如何显示一条订单包含多条商品信息,以及最后一列“总价”如何合理显示。分两步看
1. 显示一条订单包含多条商品信息
先看一个例子
<table border="1"> <tr> <th>列1</th><th>列2</th><th>列3</th><th>列4</th><th>列5</th> </tr> <tr> <td>行1</td><td>行1</td><td>行1</td><td>行1</td><td>行1</td> </tr> <tr> <td>行2</td><td>行2</td><td>行2</td><td>行2</td> <td rowspan="2">行2</td> </tr> <tr> <td>行3</td><td>行3</td><td>行3</td><td>行3</td><td>行3</td> </tr> </table>
假设“行1”代表订单1,“行2“和”行3“代表订单2(包含两条商品信息)
如图,可以看到rowspan
属性,是默认“向下合并”,而且我不知道可否改成向上合并。 colspan
是“向右合并“(也即这两属性都是放在前面)
这就导致了我在循环渲染表格时,在渲染那条订单的第一个商品信息时(如图中“行2”,就需要确定rowspan的值。如下,在内层循环(渲染一条订单的多条商品信息)第一次就确定rowspan值
<c:if test="${s.index == 0}"> <td class="gross-td" rowspan="${orderCombine.value.goodsNos.size()}"></td> </c:if>
2.最后一列“总价”如何合理显示
当时真的费脑筋,网上又搜不到,最后想到了用“临时元素”存放总价格(后来才知道这其实叫“隐藏元素”)
<table> <tr> <th>宝贝</th> <th>单价</th> <th>数量</th> <th>总价</th> </tr> <c:forEach items="${orderComMap}" var="orderCombine"> <tr class="total-tr"> <td> ${orderCombine.value.orderTime} 订单编号:${orderCombine.value.orderId} </td> <%-- 单价、数量、总价 三栏合并--%> <td colspan="3"></td> </tr> <c:set var="totalPrice" value="${0}"/> <c:forEach items="${orderCombine.value.goodsNos}" var="goodsNo" varStatus="s"> <tr class="content-tr"> <td class="img-td"> <img src="images/${goodsMap.get(goodsNo).goodsImg}" /> <span class="word-sapn"> <span>${goodsMap.get(goodsNo).goodsName}</span> <span>${goodsMap.get(goodsNo).manufacturer}</span> </span> </td> <td>${goodsMap.get(goodsNo).nowPrice}</td> <td>${orderCombine.value.buyNums.get(s.index)}</td> <%-- 暂存totalPrice--%> <c:set var="totalPrice" value="${totalPrice+goodsMap.get(goodsNo).nowPrice * orderCombine.value.buyNums.get(s.index)}"/> <c:if test="${s.index == 0}"> <%-- 如果这样他只渲染一次,价格只算了一个--%> <%-- <td class="gross-td" rowspan="${orderCombine.value.goodsNos.size()}">${totalPrice}</td>--%> <td class="gross-td" rowspan="${orderCombine.value.goodsNos.size()}"></td> </c:if> <%-- 临时元素:最后一次再渲染临时元素,总价正确,然后通过js将值填入“总价”单元格--%> <c:if test="${s.last}"> <td class="temp-td">${totalPrice}</td> </c:if> </tr> </c:forEach> </c:forEach> </table>
head元素中的script(通过js将临时元素的值填入“总价”单元格):
<script type="text/javascript"> window.onload = function () { var tempTds = document.querySelectorAll(".temp-td"); var grossTds = document.querySelectorAll(".gross-td"); grossTds.forEach(function (item,index) { item.innerHTML = tempTds[index].innerHTML; }) } </script>
临时元素:
.temp-td { display: none; }
解析:
1)这个c:set用于存放totalPrice的值
<%-- 暂存totalPrice--%> <c:set var="totalPrice" value="${totalPrice+goodsMap.get(goodsNo).nowPrice * orderCombine.value.buyNums.get(s.index)}"/>
2)这里用于在一条订单的第一个商品渲染时 合并单元格(为什么只能在第一个商品时渲染,原因见上方例子)
<c:if test="${s.index == 0}"> <td class="gross-td" rowspan="${orderCombine.value.goodsNos.size()}"></td> </c:if>
注意这里td不能直接渲染总价(这样他只渲染一次,总价只算了第一个商品):
<td class="gross-td" rowspan="${orderCombine.value.goodsNos.size()}">${totalPrice}</td>
3)这是临时元素,只在一条订单的最后一个商品时渲染(保证总价正确)
<%-- 最后一次再渲染临时元素,总价正确,然后通过js将值填入“总价”单元格--%> <c:if test="${s.last}"> <td class="temp-td">${totalPrice}</td> </c:if>