实现 DataGrid表头不动，表身滚动 的方法

用纯脚本 实现:

 

  function ScrollDataGrid() 
         ... { 
            var tb = document.getElementById("tbHeader"); 
            var dg = document.getElementById("dgSearchResult"); 
             
            if(dg!= null) 
            ...{     
                var dv = document.getElementById("dvBody"); 
                var th = dg.rows[0]; 
                for(var i = 0 ; i < th.cells.length;i++) 
                    th.cells[i].width = th.cells[i].clientWidth; 
                var tr = th.cloneNode(true); 
                 
                //tr.applyElement(tb); 
                tb.createTHead(); 
                var tbh = tb.tHead; 
                tbh.appendChild(tr); 
                tr = tbh.rows[0]; 
                var td = tr.insertCell(); 
                td.style.width = 19; 
                td.width = 19; 
                td.innerHTML = tr.cells[0].innerHTML; 
                th.style.display = 'none'; 
                if(dg.scrollHeight < 300 ) 
                    dv.style.height = dg.scrollHeight * 1 + 2; 
                 
                 
            } 

     < table  width ="100%"  border ="0"  id ="tbHeader"  cellpadding ="4"  cellspacing ="0" >  
                                         </ table >  
                                         < div  style ="OVERFLOW-Y: scroll; HEIGHT: 300px"  id ="dvBody" >  
                                             < asp:datagrid  id ="dgSearchResult"  style ="BORDER-COLLAPSE: collapse"  runat ="server"  Width ="100%"  CellPadding ="4"  DataKeyField ="编号"  BorderWidth ="1px"  BorderStyle ="Solid"  BorderColor ="RoyalBlue"  GridLines ="None" >  
                                                 < SelectedItemStyle  ForeColor ="SlateGray" ></ SelectedItemStyle >  
                                                 < ItemStyle  VerticalAlign ="Middle" ></ ItemStyle >  
                                                 < HeaderStyle  HorizontalAlign ="Center" ></ HeaderStyle >  
                                                 < Columns >  
                                                     < asp:ButtonColumn  Text ="选择"  HeaderText ="&lt;font face=webdings&gt;6&lt;/font&gt;"  CommandName ="Delete" >  
                                                         < HeaderStyle  Wrap ="False"  Width ="40px" ></ HeaderStyle >  
                                                         < ItemStyle  Wrap ="False"  HorizontalAlign ="Center" ></ ItemStyle >  
                                                         < FooterStyle  Wrap ="False" ></ FooterStyle >  
                                                     </ asp:ButtonColumn >  
                                                 </ Columns >  
                                             </ asp:datagrid ></ div >  

使用Style-Expression实现:

 

< style >  
TD.lockedhead  ... { POSITION: relative; ; TOP: expression(lockhead(this)) }  
</ style >  
< script language = " javascript " >  
function lockhead(cell) 
... { 
var table=cell.parentElement.parentElement; 
while(table&&table.tagName.toLowerCase()!="table") 
table=table.parentElement; 
var _div=table.parentElement; 
return _div.scrollTop+(cell.parentElement.rowIndex)*(parseInt(table.border)+parseInt(table.cellSpacing)-1); 
}  
</ script >  
< script language = " javascript " >  
function LockHead(table,cnt) 
... { 

if(table&&table.rows.length>=cnt) 
...{ 
for(k=0;k<cnt;k++) 
...{ 
for(i=0;i<table.rows[k].cells.length;i++) 
...{ 
table.rows[k].cells[i].className="lockedhead"; 
} 
} 
} 
}  
LockHead(Form1.all.DataGrid1, 1 ); 


</ script >

还有一种:

 

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >  
< HTML >  
< HEAD >  
< TITLE >  New Document  </ TITLE >  
< META  NAME ="Generator"  CONTENT ="EditPlus" >  
< META  NAME ="Author"  CONTENT ="" >  
< META  NAME ="Keywords"  CONTENT ="" >  
< META  NAME ="Description"  CONTENT ="" >  
</ HEAD >  

< BODY >  
< div  style ="overflow:auto;height:100px;" >  
< table  width ="100%" >  
< TR  style ="top:expression(this.offsetParent.scrollTop);background:navy;color:white;" >  
< TH  nowrap > Header A </ TH >  
< TH  nowrap > Header B </ TH >  
< TH  nowrap > Header C </ TH >  
</ TR >  
< TR >  
< TD > A </ TD >  
< TD > B </ TD >  
< TD > C </ TD >  
</ TR >  
< TR >  
< TD > A </ TD >  
< TD > B </ TD >  
< TD > C </ TD >  
</ TR >  
< TR >  
< TD > A </ TD >  
< TD > B </ TD >  
< TD > C </ TD >  
</ TR >  
< TR >  
< TD > A </ TD >  
< TD > B </ TD >  
< TD > C </ TD >  
</ TR >  
< TR >  
< TD > A </ TD >  
< TD > B </ TD >  
< TD > C </ TD >  
</ TR >  
< TR >  
< TD > A </ TD >  
< TD > B </ TD >  
< TD > C </ TD >  
</ TR >  
< TR >  
< TD > A </ TD >  
< TD > B </ TD >  
< TD > C </ TD >  
</ TR >  
< TR >  
< TD > A </ TD >  
< TD > B </ TD >  
< TD > C </ TD >  
</ TR >  
< TR >  
< TD > A </ TD >  
< TD > B </ TD >  
< TD > C </ TD >  
</ TR >  
</ table >  
</ div >  
</ BODY >  
</ HTML >

这个是css:
.DataGridFixedHeader {
position: relative;
top: expression(this.offsetParent.scrollTop);
background-color: blue
}

这个是应用:
...
<HeaderStyle Font-Bold="True" CssClass="ms-formlabel DataGridFixedHeader" BackColor="#80AFEF">
</HeaderStyle>
...