user-interface - 显示长行数据的好方法

Question

我需要向我的用户显示数据库中的信息记录。目前，我已将此信息绑定(bind)到数据网格。但是，要显示的字段太多，我的表格超出了页面范围。我真的不希望我的页面具有水平滚动，并且我不想减小字体大小..所以我想知道是否有人有更好的想法来显示长行数据？只需询问是否需要任何其他信息，谢谢:)

Answer 1

对于此类问题，我的首选解决方案是收集最重要的信息(任何可以立即识别该行的内容/人物的信息)，并将其余信息放在新的 TD 和内部表中的下一行中。使用 JavaScript 隐藏/显示它，你就很出色了。

HTML 示例

<tr>
    <td>Joe</td>
    <td>Jones</td>
    <td>555-555-5555 (m)</td>
    <td class="more">more..</td>
</tr>
<tr class='showme'>
    <td class='showthis' colspan="4">
        <h2>More info</h2>
        <table>
            <!-- yet more info here -->
        </table>
    </td>
</tr>

使用 jQuery 使其正常工作

$("td.more").click(function(){
    // don't hide/show the next TR itself, may cause cross-browser issues
    $(this).closest("tr").next("tr.showme").find(".showthis").slideToggle();
});

必要的CSS

.showthis { display:none; }
/* you'll want to play with padding and such for open/close states, too */

当然，您可以使其变得更加复杂，但这是基本功能。