为什么冻结GridView头不工作

本文关键字：工作 GridView 冻结 为什么 | 更新日期: 2023-09-27 18:16:25

我在Panel中有以下GridView, overflow: scroll允许滚动:

<asp:Panel runat="server" ClientIDMode="Static" ID="pnlScroll" CssClass="pnlScroll">
    <asp:GridView AlternatingRowStyle-BackColor="#E2E2E2" AutoGenerateColumns="false" OnSorting="yourTasksGV_Sorting" AllowSorting="true" ID="yourTasksGV" runat="server" ClientIDMode="Static" EmptyDataText="There is no data to display" OnRowDataBound="yourTasksGV_RowDataBound">
        <HeaderStyle CssClass="yourTasksGVHeader" />
        <Columns>
            <asp:BoundField DataField="Task Name" HeaderText="Task Name" SortExpression="TaskName" ItemStyle-Width="25%" ItemStyle-CssClass="taskTableColumn" />
            <asp:BoundField DataField="Department" HeaderText="Department" SortExpression="DepartmentName" ItemStyle-Width="25%" ItemStyle-CssClass="taskTableColumn" />
            <asp:BoundField DataField="Status" HeaderText="Status" SortExpression="TheStatus" ItemStyle-Width="15%" ItemStyle-CssClass="taskTableColumn" />
            <asp:BoundField DataField="Due Date" HeaderText="Due Date" SortExpression="DueDate" ItemStyle-Width="20%" ItemStyle-CssClass="taskTableColumn" />
            <asp:HyperLinkField Target="_blank" DataNavigateUrlFields="Link" DataTextField="Task Name" DataNavigateUrlFormatString="" HeaderText="Task Details" SortExpression="TaskDetails" ItemStyle-Width="15%" ItemStyle-CssClass="taskTableColumn" />
        </Columns>
    </asp:GridView>
</asp:Panel>
CSS: 

#yourTasksGV {
    width: 100%;
    padding: 0;
    margin: 0 auto;
}
#yourTasksGV th {
    padding: 8px;
    border-bottom: 2px solid black;
    background: url(../theImages/gridHdr.png) repeat-x;
}
#yourTasksGV th a {
    text-decoration: none;
}
#yourTasksGV th a:hover {
    text-decoration: underline;
}
#yourTasksGV td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #E2E2E2;
    border-right: 1px solid #E2E2E2;
}
.yourTasksGVHeader {
    position: relative;
    top: expression(this.offsetParent.scrollTop);
    z-index: 10;
}
.taskTableColumn a {
    text-decoration: none;
}
.taskTableColumn a:hover {
    text-decoration: underline;
}
.pnlScroll {
    height: 750px;
    display: inline-block;
    overflow-y: scroll;
    overflow: scroll;
    /* IE */
    scrollbar-base-color: #A0A0A0;
    scrollbar-base-color: #A0A0A0;
    scrollbar-3dlight-color: #A0A0A0;
    scrollbar-highlight-color: #A0A0A0;
    scrollbar-track-color: #EBEBEB;
    scrollbar-arrow-color: #FFFFFF;
    scrollbar-shadow-color: #A0A0A0;
    scrollbar-darkshadow-color: #A0A0A0;
}

当我滚动时，标题应该保持不变，而表的其余部分滚动。但这并没有发生，当我滚动页眉时，它也会滚动，并从视图中退出。

我如何修改我的代码使其工作?(我正在IE8上测试)

为什么冻结GridView头不工作

设置GridView ShowHeader = "false"，并通过使用HTML表格为GridView创建一个单独的header，并将GridView放置在表格下方。标题行总是固定在那里我们可以滚动GridView查看数据。在你的GridView中插入这个

 <div style="width:478px;border:1px solid #084B8A;color:#ffffff;font-weight:bold;">
        <table bgcolor="#3090C7" rules="all" >
            <tr>
                <td style ="width:71px;">Task Name</td>
                <td style ="width:180px;" onclick="__doPostBack('ctl00$ContentMain$yourTasksGV','Sort$DepartmentName')">Department</td>
                <td style ="width:90px;">Status</td>
                <td style ="width:60px;">Due Date</td>
                <td style ="width:78px;">---</td>
            </tr>
        </table>
        </div>
相关文章：