ASP.NET DataGrid 头部滑动控件

• 下载源代码 - 13.8 Kb
• 下载演示项目 - 18.4 Kb

引言

当表格显示大量数据时，用户来回滚动以查看哪个头部对应哪个列会变得困难和繁琐。我开发了一个简单的附加控件，它可以与现有的表格类型控件（如 DataGrid 和 DataList）一起工作。GridSlideHeader 是一个 ASP.NET 自定义控件，它实现了 JavaScript（和 CSS），当头部滚动出页面时，会将表格的头部“固定”在页面上。

要查看演示，请点击 此链接。

使用服务器控件

GridSlideHeader 服务器控件是一个非常简单的附加控件，可以添加到现有的 DataGrid 和 DataList 中。

只需调用 GridSlideHeader 控件，并设置 DataGridID 属性，该属性对应于 DataGrid/DataList 的 ID。就完成了！

示例

<form id="Form1" method="post" runat="server">
   <asp:datagrid id="DataGridReport1" runat="server" 
         AutoGenerateColumns="False" BorderColor="#000066">
   <EditItemStyle ForeColor="Black" BackColor="Yellow"></EditItemStyle>
   <AlternatingItemStyle Font-Size="X-Small" 
         BackColor="Gainsboro"></AlternatingItemStyle>
   <ItemStyle Font-Size="X-Small" Font-Names="Verdana"></ItemStyle>
   <HeaderStyle Font-Bold="True" BackColor="#D7D7D7"></HeaderStyle>
   <Columns>
      <asp:BoundColumn DataField="Title_ID" 
           HeaderText="Title_ID" SortExpression="Title_ID" />
      <asp:BoundColumn DataField="Title" HeaderText="Title" 
           SortExpression="Title" />
      <asp:BoundColumn DataField="Price" HeaderText="Price" 
           SortExpression="Price" />
      <asp:BoundColumn DataField="Publication" 
           HeaderText="Publication" SortExpression="Publication" />
      <asp:BoundColumn DataField="Type" HeaderText="Type" 
           SortExpression="Type" />
      <asp:BoundColumn DataField="Authors" HeaderText="Authors" 
           SortExpression="Authors"></asp:BoundColumn>
   </Columns>
   </asp:datagrid>
   <cc1:GridSlideHeader id="GridSlideHeader1" 
           runat="server" DataGridID="DataGridReport1" />
</form>

结论

这个服务器控件编写速度很快，还有很多改进空间。我没有时间实现设计器控件的东西，所以它在设计模式下可能看起来不太好。在实现 JavaScript 时，控件不是设置 TR 的位置，而是设置每个头部项目的 TD 位置。这是为了保持头部边框。最后，有人告诉我这个控件只在 IE 平台上兼容。理论上，它应该与支持 CSS 定位的任何浏览器兼容，但未经测试 :P。 享受吧，并告诉我你发现了什么错误~...