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="ＭＳゴシック" HorizontalAlign="Left"/>
                    <Columns>
                    <asp:BoundField DataField="LANDMARKNAME" HeaderStyle-ForeColor="Blue" HeaderText=" 施設名" SortExpression="LANDMARKNAME" HtmlEncode="False" ShowHeader="true">
                        <ItemStyle Wrap="False" CssClass="firstcol" Width="40%"/>
                    </asp:BoundField>
                    <asp:BoundField DataField="KIND_NAME2" HeaderText=" 種別" SortExpression="KIND_NAME2" ShowHeader="true" >
                        <ItemStyle Wrap="False" CssClass="secondcol" Width="20%"/>
                    </asp:BoundField>
                    <asp:BoundField DataField="FULLADDR" HeaderText=" 所在地" 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>

相关阅读:
关于Design Complier/Library Compiler的跌坑（坑爹）记录
博客暂时停更
简单的Verilog测试模板结构
存储器的设计/建模
静态时序分析的三种分析模式（简述）
Linux系统的基本使用
Modelsim的使用——复杂的仿真
Python-第三方库requests
MySQL查询结果写入到文件总结
MySQL创建函数报“ERROR 1418 ”错误，不能创建函数

原文地址：https://www.cnblogs.com/si812cn/p/1639820.html