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

来源：互联网发布：有效市场假说知乎编辑：程序博客网时间：2024/06/15 23:18

有时候，在线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; width: 629px;height: 21px;word-wrap:break-word; overflow:hidden;"><!--不需要显示表头水平滚动条-->    </div>    <div id="bodydiv" style="top: 33px; left: 152px; position: absolute; width: 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>

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

0 1