项目中遇到需要固定GridView表头，这个问题困扰了我很久，搜索了很多，尝试过很多办法，以下是我自己琢磨出来的方法，写出来和大家分享一下。
我在做的这个项目中需要大量用到JQuery，这个部分是利用JQuery的AJAX在后台绑定GridView之后再丢到前端处理，如果我把一堆代码全放上来会显的很莫名其妙，所以实际用到的使用方法跟下面要讲的有一点出入，只是讲一下大概思想。
效果图传不上来，只能贴代码
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>未命名頁面</title>
<script type="text/javascript" src="../Pub/Js/jquery.js"></script>
<script type="text/javascript">
function fixTableHeader(gv,scrollHeight)
{
var gvn=$(gv).clone(true).removeAttr("id");
$(gvn).find("tr:not(:first)").remove();
$(gv).before(gvn);
$(gv).find("tr:first").remove();
$(gv).wrap("<div style='height:"+ scrollHeight +"px; overflow-y: scroll;overflow-x:hidden; overflow: auto; padding: 0;margin: 0;'></div>");
}
</script>
</head>
<body>
<form id="form1" runat="server" >
<div style="width:400px;">
<table id="table1" width="100%">
<thead>
<tr><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td>head1</td></tr>
</thead>
<tbody>
<tr><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td>head1</td></tr>
<tr><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td>head1</td></tr>
<tr><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td>head1</td></tr>
<tr><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td>head1</td></tr>
<tr><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td>head1</td></tr>
<tr><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td>head1</td></tr>
<tr><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td>head1</td></tr>
<tr><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td>head1</td></tr>
<tr><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td>head1</td></tr>
<tr><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td>head1</td></tr>
<tr><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td>head1</td></tr>
<tr><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td>head1</td></tr>
<tr><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td>head1</td></tr>
<tr><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td>head1</td></tr>
<tr><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td>head1</td></tr>
<tr><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td>head1</td></tr>
</tbody>
</table>
</div>
<script type="text/javascript">
//固定表头
fixTableHeader("#table1",100);
</script>
</form>
</body>
</html>
*代码很简单，相信有一点JQuery基础的都可以很轻易的看懂，要注意：
1.调用固定表头函数(fixTableHeader)的语句一定要放在table之后，因为在载入之后才能找到该table。
2.table的表头各栏和内容各栏的宽度全都要设定，除了最右边一栏；最右边一栏的宽度不能设定
3.table的宽度设为"100%"
4.table外的div宽度要设定的比table的所有列宽之和（除了最右列）要大
以上注意点的2、3、4的目的是为了让table的列不移位
这个方法其实是看过GridViewFixedMultiHeader这个控件的固定表头的方法后想到的，这种直接操作table的方法更适合用于前端ajax的操作。
3898
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
