GridView固定表头的方法两则

最新推荐文章于 2012-06-30 11:28:00 发布

donghaima

最新推荐文章于 2012-06-30 11:28:00 发布

阅读量3.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： WebForm 文章标签： server scroll asp function object

本文链接：https://blog.youkuaiyun.com/donghaima/article/details/2787893

WebForm 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了两种在ASP.NET中使GridView表头固定的实现方法。方法一是通过CSS实现，简单但缺乏水平滚动功能；方法二是结合JavaScript和CSS，允许表格内容水平滚动时表头同步滚动，提供更好的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法一：

<head runat="server">
<title>无标题页</title>
<style>
.Freezing
{
   position:relative ;
   table-layout:fixed;
   top:expression(this.offsetParent.scrollTop);
   z-index: 10;
}

.Freezing th{text-overflow:ellipsis;overflow:hidden;white-space: nowrap;padding:2px;}
</style>

</head>

<asp:GridView ID="GridView1" runat="server" CellPadding="4" DataSourceID="SqlDataSource1"
ForeColor="#333333" GridLines="None">

......
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" CssClass="Freezing" />

......
</asp:GridView>

实现方法极其简单，缺点是没有水平滚动功能，如果表格很大的话就不方便了。

方法二：

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        GridView1.Attributes.Add("style", "table-layout:fixed");   //表格必须是固定大小
    }
}

     for(i = headGridView .rows.length -1;i > 0;i--)
         headGridView .deleteRow(i);                                 //删掉数据行

     bodyGridView.deleteRow(0);                                     //删掉表头行
     headdiv.appendChild(headGridView);
}

window.onload = init
</script>
</head>

//不需要显示表头水平滚动条
</div>
<div id="bodydiv" style="top: 45px; left: 152px; position: absolute; width: 328px;
height: 200px; overflow: auto" onscroll="headdiv.scrollLeft=scrollLeft">

       //表体的水平滚动条拖动触发表头的水平滚动事件
<asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" CellPadding="4"
            AutoGenerateColumns="False" Font-Names="airl" Font-Size="12px"
            ForeColor="#333333" AllowSorting="True">
......

<Columns>
     <asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False" ReadOnly="True"
             SortExpression="ID">
             <HeaderStyle Width="20px" />                             //必须定义表头和表体相同的宽度
             <ItemStyle Width="20px" />
     </asp:BoundField>
     <asp:BoundField DataField="GongYingShangBianHao" HeaderText="GongYingShangBianHao"
            SortExpression="GongYingShangBianHao">
            <HeaderStyle Width="300px" />
            <ItemStyle Width="300px" />
     </asp:BoundField>
......

</Columns>

......

</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:GIFTConnectionString %>"
SelectCommand="SELECT......">
</asp:SqlDataSource>
</div>