GirdView固定行头

问题的起源:

1,允许显示的范围固定,宽和高都远远超出了指定的显示范围。

2,纵向滚动条必须在行头以下显示。

使用【position:absolute;】和【滚动对象的scrollLeft】实现行头的固定

代码
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    
<title>Untitled Page</title>
</head>
<body style="margin: 0px;" onload="onload();"  tabindex="-1" oncontextmenu="return false;">
    
<form id="form1" runat="server">
       
     
<table id="tbHeader"  style="position:absolute;background-color:White;top:10px;">
        
<tr>
            
<td style="color:Blue;" class="firstcol">施設名</td>
            
<td class="secondcol">種別</td>
            
<td class="thirdcol">所在地</td>
        
</tr>
        
</table>
        
    
<div id="div_Container" style="290px;height:270px;overflow:auto;margin-top:30px;" onscroll="onScroll();">
      
            
<asp:ObjectDataSource ID="LandmarkObjectDataSource" runat="server" 
                OldValuesParameterFormatString
="original_{0}" SelectMethod="GetLandmark" 
                TypeName
="ChinTai.WorkLogic.G1005Logic" 
                OnSelected
="LandmarkObjectDataSource_Selected">
                
<SelectParameters>
                    
<asp:SessionParameter Name="name" SessionField="LandmarkQueryData" Type="String" />
                    
<asp:Parameter Direction="Output" Name="resultText" Type="String" />
                    
<asp:Parameter Direction="Output" Name="refX" Type="String" />
                    
<asp:Parameter Direction="Output" Name="refY" Type="String" />
                    
<asp:Parameter Direction="Output" Name="errorMsg" Type="String" />
                
</SelectParameters>
            
</asp:ObjectDataSource>
            
<asp:GridView ID="LandmarkGridView" runat="server" DataSourceID="LandmarkObjectDataSource" EmptyDataRowStyle-ForeColor="Red" AutoGenerateColumns="False" BorderWidth="0px" ShowHeader="false" EnableViewState="False" OnRowCreated="LandmarkGridView_RowCreated">
                    
<headerstyle Font-Size="10pt" Font-Names="MS ゴシック" HorizontalAlign="Left"/>
                    
<Columns>
                    
<asp:BoundField DataField="LANDMARKNAME" HeaderStyle-ForeColor="Blue" HeaderText="&nbsp;施設名" SortExpression="LANDMARKNAME" HtmlEncode="False" ShowHeader="true">
                        
<ItemStyle Wrap="False" CssClass="firstcol" Width="40%"/>
                    
</asp:BoundField>
                    
<asp:BoundField DataField="KIND_NAME2" HeaderText="&nbsp;種別" SortExpression="KIND_NAME2" ShowHeader="true" >
                        
<ItemStyle Wrap="False" CssClass="secondcol" Width="20%"/>
                    
</asp:BoundField>
                    
<asp:BoundField DataField="FULLADDR" HeaderText="&nbsp;所在地" SortExpression="FULLADDR" ShowHeader="true" >
                        
<ItemStyle Wrap="False" CssClass="thirdcol" />
                    
</asp:BoundField>
                
</Columns>
            
</asp:GridView>
    
</div>
    
</form>
    
<script type="text/javascript">        
function onload() {

    
var obj_TableList = document.getElementById("LandmarkGridView");
    
var obj_TableHeader = document.getElementById("tbHeader");

    
if (obj_TableList.rows[0].cells.length == 1) {

        obj_TableHeader.style.visibility 
= "hidden";
        obj_TableHeader.style.display 
= "none";

    }
    
else {

        obj_TableHeader.visibility 
= "visible";
        obj_TableHeader.style.display 
= "block";
    }

    
if (obj_TableList.rows[0].cells.length == 1){

        
var divObj = document.getElementById("div_Container");

        divObj.style.marginTop 
= 0;
    } 
    
else{

        
var gridviewObj = document.getElementById("LandmarkGridView");
        
var parentNodeDIV = gridviewObj.parentNode;
        
var tbHeaderObj = document.getElementById("tbHeader");

        tbHeaderObj.style.width 
= gridviewObj.offsetWidth;

        tbHeaderObj.rows[
0].cells[0].style.width = gridviewObj.rows[0].cells[0].offsetWidth-10;
        tbHeaderObj.rows[
0].cells[1].style.width = gridviewObj.rows[0].cells[1].offsetWidth;
        
        tbHeaderObj.rows[
0].cells[0].style.paddingLeft = 10;
        tbHeaderObj.rows[
0].cells[1].style.paddingLeft = 0;
        tbHeaderObj.rows[
0].cells[2].style.paddingLeft = 0;

    }

}

function onScroll() {

    
var tbHeaderObj = document.getElementById("tbHeader");

    
var divObj = document.getElementById("div_Container");

    tbHeaderObj.style.left 
= 0 - divObj.scrollLeft;

    tbHeaderObj.style.top 
= 10;

}
    
</script>
</body>
</html>
原文地址:https://www.cnblogs.com/si812cn/p/1639820.html