如何在JSP的display:table中实现点击行展开子行功能

Hey Carlota, 我来帮你实现display:tag表格的行展开功能！其实display:tag本身没有原生的折叠/展开子行特性，但我们可以结合JS、CSS和一点点JSP代码改造来搞定，步骤如下：

1. 改造你的display:table代码 #

首先，我们需要给主行添加点击触发标识，同时在每行后面插入默认隐藏的子行，用来展示详细内容。这里我基于你的代码做了扩展：

<display:table id="ev" name="vcomposiciones" class="display" sort="list" defaultsort="3" defaultorder="ascending" export="true" style="width:90%" requestURI="/copernico/SrvRenfeDatawarehouse" varTotals="totales">
    <display:setProperty name="export.excel.filename" value="Composiciones.xls"/>
    
    <!-- 自定义可点击的主行 -->
    <display:row class="expandable-row" onclick="toggleRowDetails('${ev.id}')">
        <display:column property="fecha" sortable="true"/>
        <!-- 这里继续添加你的其他列，比如property="xxx"的列 -->
        <display:column property="nombre" sortable="true"/>
        <display:column property="valor" sortable="true"/>
    </display:row>
    
    <!-- 隐藏的子行：用来展示详细内容，colspan要和主行列数一致 -->
    <tr id="row-${ev.id}-details" class="row-details" style="display:none;">
        <td colspan="3"> <!-- 这里的数值要等于你主行的列数 -->
            <div class="details-content">
                <h4>详细信息</h4>
                <p>日期：${ev.fecha}</p>
                <p>描述：${ev.descripcion}</p>
                
                <!-- 如果有子数据集，可以嵌套另一个display:table展示 -->
                <c:if test="${not empty ev.subElementos}">
                    <h5>子项列表</h5>
                    <display:table name="${ev.subElementos}" style="width:100%; margin-top:10px;">
                        <display:column property="subNombre"/>
                        <display:column property="subValor"/>
                    </display:table>
                </c:if>
            </div>
        </td>
    </tr>
</display:table>

2. 添加CSS样式优化交互体验 #

给表格行加一些样式，让用户能直观感受到可点击，同时美化子行：

.expandable-row {
    cursor: pointer;
    background-color: #f8f9fa;
}

.expandable-row:hover {
    background-color: #e9ecef;
}

.row-details {
    background-color: #ffffff;
    border-top: 1px solid #dee2e6;
}

.details-content {
    padding: 15px;
    line-height: 1.6;
}

3. 编写JavaScript切换显示/隐藏函数 #

在页面的<script>标签里添加这个简单的函数，用来控制子行的显示和隐藏：

function toggleRowDetails(rowId) {
    const detailsRow = document.getElementById(`row-${rowId}-details`);
    if (detailsRow.style.display === 'none') {
        detailsRow.style.display = 'table-row';
    } else {
        detailsRow.style.display = 'none';
    }
}

进阶优化：动态加载子行内容 #

如果你的子行内容比较多，或者需要从后台实时获取，可以把toggle函数改成AJAX加载的形式，避免一开始渲染所有子行拖慢页面：

function toggleRowDetails(rowId) {
    const detailsRow = document.getElementById(`row-${rowId}-details`);
    if (detailsRow.style.display === 'none') {
        // 检查是否已经加载过内容，避免重复请求
        if (!detailsRow.querySelector('.details-content')) {
            const xhr = new XMLHttpRequest();
            xhr.open('GET', `/copernico/SrvRenfeDatawarehouse?action=getDetalle&id=${rowId}`, true);
            xhr.onload = function() {
                if (xhr.status === 200) {
                    // 把后台返回的HTML插入到子行
                    detailsRow.innerHTML = `<td colspan="3"><div class="details-content">${xhr.responseText}</div></td>`;
                    detailsRow.style.display = 'table-row';
                }
            };
            xhr.send();
        } else {
            detailsRow.style.display = 'table-row';
        }
    } else {
        detailsRow.style.display = 'none';
    }
}

注意事项 #

• 一定要保证子行的colspan数值和主行的列数完全一致，否则表格布局会错乱。
• 如果使用jQuery，toggle函数可以简化成更简洁的写法，只需要给主行加data-row-id="${ev.id}"属性，然后绑定点击事件即可。

内容的提问来源于stack exchange，提问作者Carlota