layui静态表格转动态表格错位问题

深藏阁楼爱情的钟 2023-02-08 14:30 88阅读 0赞

问题描述：jsp页面，表数据是是用foreach循环来渲染的，因为要实现左右两头固定列，所以使用layui转换动态表格功能，但是结果没有达到预期，最后两行的值却没有显示到应在的位置  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzU5NjkwNQ_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzU5NjkwNQ_size_16_color_FFFFFF_t_70 1]  
原代码

<table class="layui-table xd-table-fied" lay-filter="demo">
                                <thead>
                                <tr>
                                    <th lay-data="{field:'proName', width:150,height:60,rowspan:3,align:'center',fixed:'left'}">项目名称</th>
                                    <th lay-data="{field:'parentProName', width:150,height:60, rowspan:3,align:'center',fixed:'left'}">主项目</th>
                                    <c:if test="${query.flag == '0'}">
                                        <th colspan="${result.users.size()}" style="text-align: center" lay-data="{align:'center'}">实际投入工时（天）</th>
                                    </c:if>
                                    <th lay-data="{ field:'proCost',align:'center',rowspan:3,width:150,fixed:'right'}">项目成本合计（元）</th>
                                    <th lay-data="{ field:'ratio',align:'center',rowspan:3,width:150,fixed:'right'}">项目投入比例（%）</th>
    
                                </tr>
                                <c:if test="${query.flag == '0'}">
                                    <tr>
                                        <c:forEach items="${result.users}" var="i" varStatus="status">
                                            <th lay-data="{field:'${status.index}', width:100,align:'center'}">${status.index+1}</th>
                                        </c:forEach>
                                    </tr>
                                    <tr>
                                        <c:forEach items="${result.users}" var="i" varStatus="status">
                                            <th lay-data="{field:'userName${status.index}', width:100,align:'center'}">${i.userName}</th>
                                        </c:forEach>
                                    </tr>
                                </c:if>
                                </thead>
                                <tbody>
    
                                    <c:forEach items="${result.list}" var="item">
                                        <tr>
                                            <td>
                                                <div title="${item.proName}" style="padding-left:10px">${item.proName}</div>
                                            </td>
                                            <td>
                                                <div title="${item.parentProName}" style="padding-left:10px">${item.parentProName}</div>
                                            </td>
    
                                            <c:if test="${query.flag == '0'}">
                                                <%--循环显示中间的数据--%>
                                                <c:forEach items="${item.workTimes}" var="item2">
                                                    <td>
                                                        <div title="${item2.workTime}" style="padding-left:10px" > <fmt:formatNumber type="number" value="${item2.workTime*0.1}" pattern="#.#"/></div>
                                                    </td>
                                                </c:forEach>
                                            </c:if>
                                                <%--项目成本合计--%>
                                            <td>
                                                <div title="<fmt:formatNumber value="${item.proCost}" minFractionDigits="2" maxFractionDigits="2" pattern="#.##"></fmt:formatNumber>" style="padding-left:10px"><fmt:formatNumber value="${item.proCost}" minFractionDigits="2" maxFractionDigits="2" pattern="#.##"></fmt:formatNumber> </div>
                                            </td>
                                                <%--项目投入比例（%）--%>
                                            <td>
                                                <div title="${item.ratio}" style="padding-left:10px">${item.ratio}%</div>
                                            </td>
                                        </tr>
                                    </c:forEach>
                                </tbody>
                            </table>

解决放法：el表达式渲染数据的时候，应把最后两列数据在中间数据之前渲染  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzU5NjkwNQ_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzU5NjkwNQ_size_16_color_FFFFFF_t_70]: /images/20230208/f35b0a25046341d78497e0491307de5c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzU5NjkwNQ_size_16_color_FFFFFF_t_70 1]: /images/20230208/25e0319406c240938d24df96be340778.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzU5NjkwNQ_size_16_color_FFFFFF_t_70 2]: /images/20230208/cc5a347292734cc19b4ed7bcddad66f5.png