Question

可能重复：
Fixed GridView Header with horizontal and vertical scrolling in asp.net

我有一项任务是设计一个带有修复标头的Scrollable 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设计标题。

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

Answer 1

除了你的问题，你应该知道的事情很少：

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

2）如果为所有单元格（表格和标题）设置静态长度，纯HTML/CSS solution将起作用。如果内容很长，以适应一个单元格并且不可能打破线条（我有时会使用德语名词，所以我知道这是可能的）所有内容都会崩溃。

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

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

玩得开心！

Answer 2

我做过几次这样的事情。

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

我能给出的唯一提示是远离网格上的垂直线。很难在gridview上获得线条，并且桌面上的线条可以跨浏览器排列。

具有修复标头的可滚动Gridview

2 个答案: