固定标题的网格视图 ASP.NET

Question

我查看了很多固定头部网格视图的示例，并尝试使用div和JavaScript尝试了几个选项。但是我没有从示例中获得有效结果，这里是否有我遗漏的东西。

 CSS 
.gridViewHeader
{
     background-color:Navy;
    color:blue;
    font-size:12px;
    font-weight:bold;
    position:relative;
    z-index:10;
   top:expression(<%= gv.HeaderRow %>.offsetParent.scrollTop-2);
}

design source
<table>
<tr>
            <td>
                &nbsp;
            </td>
        </tr>
    </table>
    <div>
        <asp:GridView ID="gv" runat="server" CellPadding="4" PageSize="50" RowHeaderColumn="True"
            AllowPaging="True" BackColor="White" BorderColor="#3366CC" BorderStyle="None"
            BorderWidth="1px" CssClass="gridViewHeader">
            <PagerSettings Mode="NumericFirstLast" />
            <PagerStyle BackColor="#99CCCC" ForeColor="#003399" HorizontalAlign="Left" VerticalAlign="Middle" />
            <RowStyle BackColor="White" ForeColor="#003399" BorderStyle="Inset" HorizontalAlign="Center"
                VerticalAlign="Middle" Wrap="False" />
            <SelectedRowStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" />
        </asp:GridView>
    </div>
        <asp:HiddenField ID="hiddenfield1" runat="server"  />
    </asp:Content>

- Fun Living

Answer 1

你可以使用

<HeaderStyle CssClass="gridViewHeader" />

关于您的样本

<asp:GridView ID="gv" runat="server" CellPadding="4" PageSize="50" RowHeaderColumn="True"
            AllowPaging="True" BackColor="White" BorderColor="#3366CC" BorderStyle="None"
            BorderWidth="1px" >

            <HeaderStyle CssClass="gridViewHeader" />

            <PagerSettings Mode="NumericFirstLast" />
            <PagerStyle BackColor="#99CCCC" ForeColor="#003399" HorizontalAlign="Left" VerticalAlign="Middle" />
            <RowStyle BackColor="White" ForeColor="#003399" BorderStyle="Inset" HorizontalAlign="Center"
                VerticalAlign="Middle" Wrap="False" />
            <SelectedRowStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" />
        </asp:GridView>

- Aghilas Yakoub

---

谢谢Candie的回答，我尝试了那个选项，但是标题也会上移而不是固定。 - Fun Living

我很乐意帮助你，但我认为在这种情况下你可能有CSS问题，因为<HeaderStyle CssClass="gridViewHeader" />是正确的答案。 - Aghilas Yakoub

Answer 2

这个 CSS 可以解决你的问题：

.GVFixedHeader { font-weight:bold; background-color: Green; position:relative; 
             top:expression(this.parentNode.parentNode.parentNode.scrollTop-1);}

- Chaitali

---

我尝试了这个选项，但是标题也会移动，它会冻结在网格视图<div>的上方。 - Fun Living

你使用的是哪个浏览器？如果标题栏在移动，则删除top:expression并使用.GVFixedHeader { font-weight:bold; background-color: Green; position:relative; }。 - Chaitali

Answer 3

我刚刚做了这件事。我使用了这篇文章作为参考。

http://csharpdotnetfreak.blogspot.com/2009/07/scrollable-gridview-fixed-headers-asp.html

关键是创建一个表格，然后将网格放置在该表格下方的 div 中。将详细单元格的宽度设置为 gridview 中单元格的相同宽度。然后确保滚动条保持开启状态，这样当实际上不需要滚动功能时，网格和表格将对齐。

- briskovich

---

你好，此选项导致标题和行详细信息的宽度不匹配。标题和列是动态创建的。标题和详细列未正确对齐。 - Fun Living

正确的做法是在网格视图中定义每个结果的宽度，以使其对齐。 - briskovich