EL表达式合并table列rowspan

最新推荐文章于 2025-06-20 16:31:28 发布

liu_yujie2011com

最新推荐文章于 2025-06-20 16:31:28 发布

阅读量6.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： Java

本文链接：https://blog.youkuaiyun.com/liu_yujie2011com/article/details/62055158

Java 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了如何利用EL表达式解决表格中发货批次相同列的rowspan合并问题，通过设置内外层集合的索引标识，实现合并收货状态和查看备注列，提供了一种优雅的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如下图问题的描述：

如图所示需要将发货批次相同的列合并，对应的收货状态和查看备注合并。刚开始的思路只限于用js写，后来经过同事的指点发现永EL表达式就能很好的解决，看代码：

 <div class="materialCode stdtable">
            <h2>发货情况</h2>
            <ul class="theadUl clearfix">
                <li class="td1">发货批次</li>
                <li class="td2">商品</li>
                <li class="td3">发货数量</li>
                <li class="td4">剩余数量</li>
                <li class="td5">收货数量</li>
                <li class="td6">收货状态</li>
                <li class="td7">操作</li>
            </ul>
            <table id="table1">
                <thead>
                    <tr>
                        <th class="td1"></th>
                        <th class="td2"></th>
                        <th class="td3"></th>
                        <th class="td4"></th>
                        <th class="td5"></th>
                        <th class="td6"></th>
                        <th class="td7"></th>
                    </tr>
                </thead>
                <tbody>
                <c:forEach var="deliverGoodsList"
                     items="${orderDetail.deliverGoodsList}" varStatus="outer">
                    <c:forEach var="deliverGoodsDetaiList"
                               items="${deliverGoodsList.deliverGoodsDetaiList}" varStatus="inner">
                    <tr flag="${deliverGoodsList.deliverGoodsId}" orderId="${deliverGoodsList.orderId}" goodsId="${deliverGoodsDetaiList.goodsId}">
                        <c:if test="${inner.index == 0}">
                     <td rowspan="${deliverGoodsList.deliverGoodsDetaiList.size()}">${outer.index+1}</td>
                  </c:if>

                            <td>
                                <div class="ord_product"><img src="${deliverGoodsDetaiList.goodsImage}">
                                    <div>
                                        <c:if test="${orderDetail.orderForm.orderType =='2' }">
                                            <h5><a href="javascript:void(0);">${deliverGoodsDetaiList.goodsName}</a></h5>
                                        </c:if>
                                        <c:if test="${orderDetail.orderForm.orderType !='2' }">
                                            <h5><a href="${URL_WWW}/shop/index.php?act=goods&goods_id=${deliverGoodsDetaiList.goodsId}">${deliverGoodsDetaiList.goodsName}</a></h5>
                                        </c:if>

                                    </div>
                                </div>
                            </td>
                            <td>${deliverGoodsDetaiList.deliveryNum}</td>
                            <td>${deliverGoodsDetaiList.overplusNum}</td>
                            <td>${deliverGoodsDetaiList.takeDeliveryNum}</td>
                            <c:if test="${inner.index == 0}">
                                <td rowspan="${deliverGoodsList.deliverGoodsDetaiList.size()}">
                                <c:if test="${deliverGoodsList.deliveryStatus =='10' }">
                                   待发货
                                </c:if>
                                <c:if test="${deliverGoodsList.deliveryStatus =='20' }">
                                    待确认收货
                                </c:if>
                                <c:if test="${deliverGoodsList.deliveryStatus =='30' }">
                                    已收货
                                </c:if>
                                <c:if test="${deliverGoodsList.deliveryStatus =='40' }">
                                    退货
                                </c:if>
                                </td>
                            </c:if>
                        <c:if test="${inner.index == 0}">
                            <td rowspan="${deliverGoodsList.deliverGoodsDetaiList.size()}"><a href="javascript:;" class="pr beizhu">查看备注
                              <div class="beizhu_msg" style="display: none;">
                                            <img src="${URL_LIB}/static/order/images/sanjiao_orange.png">
                                            <p>${deliverGoodsList.logisticsRemark}</p>
                              </div>
                            </a>
                                <c:if test="${deliverGoodsList.deliveryStatus !='30' }">
                                 <input type="button" name="" value="确认收货" class="dayin" onclick="showDeliver(${deliverGoodsList.deliverGoodsId})" >
                               </c:if>
                            </td>
                        </c:if>
                        <%--<td>${deliverGoodsDetaiList.goodsId}</td>--%>
                       </c:forEach>
                    </tr>
                </c:forEach>
                </tbody>
                <c:if test="${empty orderDetail.deliverGoodsList}">>
                        <tbody>
                        <tr class="opt_zanwu">
                            <td colspan="7">暂无发货信息</td>
                        </tr>
                        </tbody>
                </c:if>
            </table>
        </div>

如上图代码红字部分显示，将内层和外层的集合分别设定一个索引标识inner 和outer，然后根据内层inner的计数来合并外层rowspan的值，很完美的解决了合并的问题。