ASP.NET-GridView之固定表数据滚动

有时候，在线Web开发时，需要显示的数据往往会超过我们规定的表格长度，所以为了方便显示大量数据，为了美观，这里提出了两种显示数据方式。

①可以滚动显示数据但是表头未能获取

效果显示

前端DEMO

<span style="font-family:Microsoft YaHei;font-size:18px;"><body>
    <form id="form1" runat="server">
    <div id="headdiv" style="top: 16px; text-align:center; left: 152px; position: absolute;  629px;height: 21px;word-wrap:break-word; overflow:hidden;"><!--不需要显示表头水平滚动条-->
    </div>
    <div id="bodydiv" style="top: 33px; left: 152px; position: absolute;  647px;height: 300px; overflow: auto" onscroll="headdiv.scrollLeft=scrollLeft"><!--表体的水平滚动条拖动触发表头的水平滚动事件-->
        <!--Gridview中必须定义表头和表体相同的宽度-->
        <asp:GridView ID="GridView1" BorderColor="Black" OnRowDataBound="GridView1_RowDataBound"  runat="server" AutoGenerateColumns="False"  Font-Size="12px" width="629px">
          <Columns>
            <asp:BoundField DataField="ID" HeaderText="编号" >
                <HeaderStyle Width="40px" />
                <ItemStyle Width="40px" />
            </asp:BoundField>
            <asp:BoundField DataField="EmpID" HeaderText="账号" >
                <HeaderStyle Width="70px" />
                <ItemStyle Width="70px" />
            </asp:BoundField>
            <asp:BoundField DataField="EmpRealName" HeaderText="姓名" >
                <HeaderStyle Width="60px" />
                <ItemStyle Width="60px" />
            </asp:BoundField>
            <asp:BoundField DataField="EmpSex" HeaderText="性别" >
                <HeaderStyle Width="40px" />
                <ItemStyle Width="40px" />
            </asp:BoundField>
            <asp:BoundField DataField="EmpAddress" HeaderText="住址" >
                <HeaderStyle Width="140px" />
                <ItemStyle Width="140px" />
            </asp:BoundField>
            <asp:BoundField DataField="EmpZipCode" HeaderText="邮编" >
                <HeaderStyle Width="40px" />
                <ItemStyle Width="40px" />
            </asp:BoundField>
            <asp:BoundField DataField="EmpBirthday" HeaderText="生日" DataFormatString="{0:d}" HtmlEncode="False" >
                <HeaderStyle Width="120px" />
                <ItemStyle Width="120px" />
            </asp:BoundField>
            <asp:BoundField DataField="EmpSalary" HeaderText="月薪" >
                <HeaderStyle Width="40px" />
                <ItemStyle Width="40px" />
            </asp:BoundField>
          </Columns>
            <RowStyle HorizontalAlign="Center" />
            <PagerStyle HorizontalAlign="Center" />
            <HeaderStyle BackColor="Azure" Font-Bold="True" ForeColor="Black" CssClass="Freezing" Font-Size="12px" HorizontalAlign="Center"/>
        </asp:GridView>
    </div>
    </form>
</body></span>

②可以滚动显示数据表头一直存在

效果显示

改善部分，在前者基础上增加了JavaScript方法

DEMO

<span style="font-family:Microsoft YaHei;font-size:18px;">    <script language="javascript" type="text/javascript">
    function init()
    {
        var bodyGridView=document.getElementById("<%=GridView1.ClientID%>");
        var headGridView=bodyGridView.cloneNode(true);
        for(i=headGridView.rows.length-1;i>0;i--)
          headGridView.deleteRow(i);
        bodyGridView.deleteRow(0);//删掉数据行
        headdiv.appendChild(headGridView);//删掉表头行
    }
    window.onload=init;
    </script></span>

感谢您的宝贵时间······