GridView固定表头的方法两则

最新推荐文章于 2012-04-11 22:58:00 发布

超人Q

最新推荐文章于 2012-04-11 22:58:00 发布

阅读量1.4k

点赞数

分类专栏： ASP.NET 文章标签： server scroll asp function object

ASP.NET 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

方法一：

<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"); //表格必须是固定大小
}
}

<head runat="server">
<title>无标题页</title>
<script 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>
</head>

<div id="headdiv" style="top: 16px; left: 152px; position: absolute; width: 328px;
height: 32px; overflow-x: hidden; overflow-y: scroll">

//不需要显示表头水平滚动条
</div>
<div id="bodydiv" style="top: 45px; left: 152px; position: absolute; width: 328px;
height: 200px; overflow: auto" οnscrοll="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>

原文链接