为DataGrid添加scrollbar并固定header

最新推荐文章于 2022-08-26 15:34:00 发布

原创最新推荐文章于 2022-08-26 15:34:00 发布 · 906 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#datagrid #header #stylesheet #asp #div #server

.NET技术专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何在ASP.NET中为DataGrid添加滚动条，并使用CSS固定表格的头部。通过在页面中创建一个具有滚动条的DIV区域，然后将DataGrid放入其中，并应用特定的CSS样式，特别是使用.gridFixedHeader类来实现头部固定。CSS文件中的关键代码是设置position为relative和利用expression计算offsetParent.scrollTop，确保头部在滚动时保持可见。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.首先在页面中划出一个带有滚动条的区域：
<DIV style="OVERFLOW:auto; WIDTH:54.55%; HEIGHT:136px; TEXT-ALIGN:left">

</DIV>

2.将datagrid添加到区域之中并引用css固定标题：

<HEAD>
......

</HEAD>

<body〉
<DIV style="OVERFLOW:auto; WIDTH:54.55%; HEIGHT:136px; TEXT-ALIGN:left">

<asp:datagrid id="DataGrid1" runat="server" AllowSorting="True" Height="96px" GridLines="Vertical"
     CellPadding="3" BackColor="White" BorderWidth="1px" BorderStyle="None" BorderColor="#999999"
     Width="592px" ShowHeader="true">
<SelectedItemStyle Font-Bold="True" Wrap="False" ForeColor="White" BackColor="#008A8C"></SelectedItemStyle>
<EditItemStyle Wrap="False" Width="10px"></EditItemStyle>
<AlternatingItemStyle Wrap="False" BackColor="Gainsboro"></AlternatingItemStyle>
<ItemStyle Wrap="False" ForeColor="Black" BackColor="#EEEEEE"></ItemStyle>
<HeaderStyle Font-Bold="True" Wrap="False" ForeColor="White" BackColor="#000084" CssClass="gridFixedHeader"></HeaderStyle>
<FooterStyle Wrap="False" ForeColor="Black" BackColor="#CCCCCC"></FooterStyle>
<Columns>
     <asp:EditCommandColumn ButtonType="LinkButton" UpdateText="更新" CancelText="取消" EditText="编辑">
     <HeaderStyle Wrap="False"></HeaderStyle>
     <ItemStyle Wrap="False"></ItemStyle>
     <FooterStyle Wrap="False"></FooterStyle>
     </asp:EditCommandColumn>
</Columns>
<PagerStyle HorizontalAlign="Center" ForeColor="Black" BackColor="#999999" Wrap="False" Mode="NumericPages"></PagerStyle>
</asp:datagrid>