Question

我有一张有56列的表格。我们不想要任何水平滚动，所以我们决定尝试手风琴效果，用户点击一行（默认显示7列），并向下展开显示其余数据。展开时，总共有15行。

现在，当我显示超过约5个初始行（扩展前）时，执行手风琴会变得非常慢。我的猜测是，因为它必须在发生这种情况时重新定位表，性能会随着显示更多行而大幅下降。

此网页上没有任何其他内容表现不佳。我已经应用.table-hover，并且永远不会导致任何延迟。

我目前正在通过JSP使用占位符数据填充表，所以我确信一旦我实际查询数据库性能将再次下降。

<table class="table table-hover table-condensed">
    <thead>
        <th></th><th nowrap>Column</th><th nowrap>Column</th>
        <th nowrap>Column</th><th nowrap>Column</th><th nowrap>Column</th>
        <th nowrap>Column</th><th nowrap>Column</th>
    </thead>
    <tbody>
        <%
            for(int i = 0; i < 25; i++) {%>
                <tr data-toggle="collapse" data-target="<%out.print(".record" + i);%>" class="clickable">
                    <td>
                        <div class="form-group">
                            <div class="btn-group">
                                    <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-remove-sign"></span></button>
                                    <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-pencil"></span></button>
                                    <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-plus"></span></button>
                                    <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-plus-sign"></span></button>
                             <div>
                         </div>
                    </td>
                    <td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td>
                </tr>
                <%
                    for(int j = 0; j < 7; J++)
                    {%>
                        <tr>
                                <th class="hiddenRow">
                                    <div class="collapse <%out.print("record" + i);%>"></div>
                                </th>
                                <th class="hiddenRow">
                                    <div class="collapse <%out.print("record" + i);%>">Hidden Column</div>
                                </th>
                                <th class="hiddenRow">
                                    <div class="collapse <%out.print("record" + i);%>">Hidden Column</div>
                                </th>
                                <th class="hiddenRow">
                                    <div class="collapse <%out.print("record" + i);%>">Hidden Column</div>
                                </th>
                                <th class="hiddenRow">
                                    <div class="collapse <%out.print("record" + i);%>">Hidden Column</div>
                                </th>
                                <th class="hiddenRow">
                                    <div class="collapse <%out.print("record" + i);%>">Hidden Column</div>
                                </th>
                                <th class="hiddenRow">
                                    <div class="collapse <%out.print("record" + i);%>">Hidden Column</div>
                                </th>
                                <th class="hiddenRow">
                                    <div class="collapse <%out.print("record" + i);%>">Hidden Column</div>
                                </th>
                            </tr>
                            <tr>
                                <td class="hiddenRow">
                                    <div class="collapse <%out.print("record" + i);%>"></div>
                                </td>
                                <td class="hiddenRow">
                                    <div class="collapse <%out.print("record" + i);%>">Hidden Cell</div>
                                </td>
                                <td class="hiddenRow">
                                    <div class="collapse <%out.print("record" + i);%>">Hidden Cell</div>
                                </td>
                                <td class="hiddenRow">
                                    <div class="collapse <%out.print("record" + i);%>">Hidden Cell</div>
                                </td>
                                <td class="hiddenRow">
                                    <div class="collapse <%out.print("record" + i);%>">Hidden Cell</div>
                                </td>
                                <td class="hiddenRow">
                                    <div class="collapse <%out.print("record" + i);%>">Hidden Cell</div>
                                </td>
                                <td class="hiddenRow">
                                    <div class="collapse <%out.print("record" + i);%>">Hidden Cell</div>
                                </td>
                                <td class="hiddenRow">
                                    <div class="collapse <%out.print("record" + i);%>">Hidden Cell</div>
                                </td>
                            </tr>
                      <%}
                   }
                 %>
            </tbody>
       </table>

任何有关加速这项工作的协助都会很棒。我不知道是否有可能，而不是把一切都推倒，手风琴效果只是覆盖在下面的任何东西？如果这是有道理的。

编辑：CSS 除了Bootstrap之外，我目前还没有多少额外的CSS应用，但现在就是。

<style type="text/css">
    td {
        white-space:nowrap;
    }

    body {
        padding-top: 50px; 
    }

    .hiddenRow {
        padding: 0 !important;
    }

    table .btn{
      padding: 1px 5px 1px;
      margin-right: -3px;
    }

</style>

Answer 1

您应该为<tr>提供课程.collapse，而不是<div>。

所以改变你的代码：

<tr>
    <td class="hiddenRow">
         <div class="collapse <%out.print("record" + i);%>">xxx</div>
    </td>
</tr>

为：

<tr class="collapse <%out.print("record" + i);%>">
    <td class="hiddenRow">
         <div>xxx</div>
    </td>
</tr>

Bootstrap 3手风琴对桌面的影响很慢

1 个答案: