修复 DataGrid 中的标题

引言

本文档描述了如何固定 Datagrid 的表头。

背景

用户应该具备 CSS、JavaScript 对象结构以及 Div 事件的基本知识。

Using the Code

首先，让我们设计页面

<div id="Div" runat="server" 
style="position:relative; top:0px; left:0px; height:500px; width:250px; overflow:auto">
<asp:DataGrid ID="dgCheckScrollingHeader" runat="server" 
Width="410px" AutoGenerateColumns="False" CellSpacing="1" 
CellPadding="0" ForeColor="#333333" GridLines="vertical">
<Columns>
<asp:TemplateColumn HeaderText="Column 1">
<ItemTemplate>
<asp:Label ID="lblCol1Data" Width="130px" runat="server" 
Text='<%# DataBinder.Eval(Container.DataItem,"Col1Data") %>' ></asp:Label>
</ItemTemplate>
<HeaderStyle Width="150px" />
<ItemStyle Width="150px" />
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="Column 2">
<ItemTemplate>
<asp:Label ID="lblCol2Data" Width="170px" runat="server" 
Text='<%# DataBinder.Eval(Container.DataItem,"Col2Data") %>' ></asp:Label>
</ItemTemplate>
<HeaderStyle Width="180px" />
<ItemStyle Width="180px" />
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="Column 3">
<ItemTemplate>
<asp:Label ID="lblCol3Data" Width="70px" runat="server" 
Text='<%# DataBinder.Eval(Container.DataItem,"Col3Data") %>' ></asp:Label>
</ItemTemplate>
<HeaderStyle Width="80px" />
<ItemStyle Width="80px" />
</asp:TemplateColumn>
</Columns> 
<AlternatingItemStyle BackColor="White" />
<ItemStyle BackColor="#EFF3FB" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" Height="25px" 
Font-Size="15px" ForeColor="White" HorizontalAlign="Center" Wrap="false" />
</asp:DataGrid>
</div>

以下代码对于 Div 标签是必需的，您可以根据需要设置 Div 的 height 和 width。

style="position:relative; top:0px; left:0px; overflow:auto;" 

Itemtemplates/Columns 的 HeaderStyle-Width 和 ItemStyle-Width 应该相等，以解决在不同浏览器中调用时表头错位的问题。DataGrid 的宽度应该是 datagrid 方法中所有列宽的总和。单元格填充和单元格间距需要分别设置为 0 和 1。 这消除了当 div 处于 scrollTop=0px 位置时，表头行大小增加的情况。

以下代码需要放在带有 javascript 语言和 text/javascript 类型的 script 标签中。每当滚动 div 以查看 datagrid 的内容时，都需要调用此函数。此函数需要两个参数，第一个参数是 Div 对象，第二个参数是将发送到客户端/浏览器 Dom 的 datagrid ID。

function setonScroll(divObj,DgID)  
        {
            var datagrid = document.getElementById(DgID);
            var HeaderCells = datagrid.getElementsByTagName('th');
            var HeaderRow;
            if(HeaderCells == null || HeaderCells.length == 0)
            {
                var AllRows = datagrid.getElementsByTagName('tr');
                HeaderRow = AllRows[0];        
            }
            else
            {
                HeaderRow = HeaderCells[0].parentNode;        
            }            
            
            var DivsTopPosition = parseInt(divObj.scrollTop);
            
            if(DivsTopPosition>0)
            {
                HeaderRow.style.position = 'absolute';
                HeaderRow.style.top = (parseInt(DivsTopPosition)).toString() + 'px';
                HeaderRow.style.width = datagrid.style.width;                
                HeaderRow.style.zIndex='1000';
            }
            else
            {
                divObj.scrollTop = 0;
                HeaderRow.style.position = 'relative';
                HeaderRow.style.top = '0';
                HeaderRow.style.bottom='0';
                HeaderRow.style.zIndex='0';                
            }
        }

以下代码需要在页面加载时添加到您的代码后台文件中。这将有助于引发 Div 的 onscroll 事件并固定 datagrid 的表头。

Div.Attributes.Add("onscroll", "setonScroll
	(this,'" + dgCheckScrollingHeader.ClientID + "');");  

此代码经过测试，可在以下浏览器中运行：

• Internet Explorer 6 及更高版本
• Mozilla 2.0 及更高版本
• Opera 9.6
• Google Chrome

关注点

挑战在于找到一种简单的解决方案，无需使用任何第三方 Web 控件或工具来固定 datagrid 表头。最重要的是，只要浏览器支持 Div 的 onscroll 事件和 JavaScript，它就可以跨浏览器运行。

历史

• 2009 年 6 月 26 日：初始发布