Question

我需要将数据库中的信息记录显示给我的用户。目前，我将此信息绑定到数据网格。但是，要显示的字段太多而我的表格正在离开页面。我真的不希望我的页面有水平滚动，我不想减小字体大小..所以我想知道是否有人有更好的想法去显示长行数据？只要询问是否需要任何其他信息，thx：）

Answer 1

有几种方法。很大程度上取决于数据。

可选列（用户可配置 - 允许用户隐藏它们的列不想要）。通过这种方式，您还可以拥有“很高兴”的列，但用户并不总是需要。
使用小图标代替单词适用的地方例如，而不是“真” 放一个小勾号。
在长文本上使用省略号（...），带有 div title属性，所以他们看到完整鼠标悬停时的文字。

Answer 2

我这样做的最佳解决方案是收集最重要的信息（任何能够立即识别行的内容/行的内容），并将其余部分放在新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 */

当然，你可以使它变得更复杂，但这是基本的功能。

Answer 3

我知道你不喜欢水平滚动的想法，但也许如果你实现它，以便修改/冻结前几个有意义的列，水平滚动对用户来说不那么烦人了？

Answer 4

页面上的水平滚动是魔鬼！但是，在这种情况下，你可以通过将GridView包装在div中并仅在div本身（即网格）上启用水平滚动来至少包含它。

<div style="overflow-x: auto;">
 //GridView
</div>

Answer 5

将数据拆分为两行。尽量保持逻辑，例如，第一行的第一列将是“First Name”，第二列的第一列将是“Last Name”。然后第二列将是第一行的“街道地址”和第二行的“城市，州，邮编”。等等。

在这种情况下，使用ListView而不是GridView可能会更好。

显示长行数据的好方法

5 个答案: