为什么冻结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 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>