1

可能重复：
在 asp.net 中修复了具有水平和垂直滚动的 GridView 标题

我有一个任务要设计来构建一个带有修复标题的可滚动网格视图。我试过用 Div 开发它

    <div id="DataDiv" style="overflow: auto; border: 1px solid olive; 
        width: 600px; height: 300px;" />

  <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnRowDataBound="Gridview1_RowDataBound"
            ShowHeader="false" RowStyle-VerticalAlign="Bottom">
            <Columns>
                <asp:BoundField DataField="dbms_id" HeaderText="ID" ItemStyle Width="30px" />
                <asp:BoundField DataField="dbms" HeaderText="Dbms" ItemStyle-Width="50px" />
                <asp:BoundField DataField="version" HeaderText="Version" ItemStyle-Width="30px" />
            </Columns>
        </asp:GridView>
    </div>

但它不起作用，因为标题没有得到修复。

然后我又找到了一个代码，如

<div style=" background-repeat: repeat-x; height: 30px;
        width: 200px; margin: 0; padding: 0">
        <table cellspacing="0" cellpadding="0" rules="all" border="1" id="tblHeader" style="font-family: Arial;
            font-size: 10pt; width: 200px; color: Black; border-collapse: collapse; height: 100%;">
            <tr>
                <td style="width: 30px; text-align: center">
                   ID
                </td>
                <td style="width: 50px; text-align: center">
                    Dbms
                </td>
                <td style="width: 30px; text-align: center">
                    Version
                </td>
            </tr>
        </table>
    </div>
    <div style ="height:100px; width:617px; overflow:auto;">
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnRowDataBound="Gridview1_RowDataBound"
            ShowHeader="false" RowStyle-VerticalAlign="Bottom">
            <Columns>
                <asp:BoundField DataField="dbms_id" HeaderText="ID" ItemStyle-Width="30px" />
                <asp:BoundField DataField="dbms" HeaderText="Dbms" ItemStyle-Width="50px" />
                <asp:BoundField DataField="version" HeaderText="Version" ItemStyle-Width="30px" />
            </Columns>
        </asp:GridView>
    </div>

在这种方法中，我正在使用纯 html 设计标题。

现在的问题是，实现这一要求的最佳方法是什么。

4

2 回答 2

2

除了您的问题之外，您还应该了解以下几点：

1）通过设计表格单元格将自动调整大小并匹配最长单元格的内容，使表格可读。如果您通过固定其标题来破坏此“规则”您将不得不注意调整标题单元格的大小，因为标题不再受表格规则的约束。

2）纯HTML/CSS 解决方案仅在您为所有单元格（表格和标题）设置静态长度时才有效。如果内容太长而无法容纳一个单元格并且不可能换行（我有时会使用德语名词，所以我知道这是可能的）一切都会分崩离析。

3）如果您想要一个动态解决方案，您必须在每次内容更改时使用 JS 重新计算表格单元格。

我想这很简单的解释。如果您需要一些示例，请告诉我，我会为您提供一个。

玩得开心！

于 2012-12-26T11:05:02.307 回答
0

我做过几次这样的事情。

http://www.codeproject.com/Tips/471756/Fixed-Table-Header-atop-scrollable-GridView-in-ASP

我能给出的唯一提示是远离网格上的垂直线。很难让 gridview 上的线条和表格上的线条在浏览器中对齐。

于 2012-12-26T18:04:21.347 回答