gridview表头固定（经验篇）

这里先介绍一下我的项目中遇到的一个问题，这个问题各种项目中也是用的最多的一个，那就是gridview的表头固定。就是我们往下拉内容的时候，我们还想同时看到表头对应的标题，不想反复上拉下拉去比对表格的表头和内容。同时网上在其他的地方也在不断的搜索这个知识。觉得有必要用一个经验篇章来记录一下，以免以后需要用到，同时，也想为大家解决一些东西。这其中肯定有雷同，有所雷同的地方，请大家不要喷我，也是学习总结的一种方式而已。

我就只讲述一下步骤吧：

1、首先在后端需要加上这样一句话：

  if (!IsPostBack)

        {

            GridView1.Attributes.Add("style", "table-layout:fixed");

}

这句话是给id为GridView1的控件添加一个table-layout属性，设置该属性为“固定属性”。

2、整个过程采用gridview表头和表格内容分离的思想，下面假设有两个div，一个叫divTitle,一个叫divBody;Title我们用来存放gridview的表头，即HeaderText内容在这里显示，而divBody，就用来显示gridview的内容。那么具体，如何将表头和内容分离？下面用代码叙述。首先我先介绍一下网上大家能找到的方法：

（a）网上的脚本如下：

<script type="text/javascript">
function init()
{
var bodyGridView = document.getElementById("<%=GridView1.ClientID%>");//根据gridview的id找到该控件，可以理解为gridview控件的实例化
var headGridView= bodyGridView.cloneNode(true);  //将gridview下面的所有节点完完全全的copy到headgridview中，同时，继承了所有的css样式表，这句话很关键
var divTitle= document.getElementById("divTitle");   //实例化承载表头的div
var divBody= document.getElementById("divBody"); //实例化承载内容的div

for(var i = headGridView.rows.length -1;i > 0;i--)
headGridView.deleteRow(i);                               //删掉数据行，这里headgridview只剩下表头的东西

bodyGridView.deleteRow(0);                                 //删掉表头行，这样divBody中的表格就只剩下内容，从内容开始显示

divTitle.appendChild(headGridView);	//将只剩下表头的headgridview放入divTitle的div中。
}
window.onload = init;  //在页面载入的函数上，实现init这个脚本
</script>

这个脚本到这里，也就差不多结束了，然后当然，需要对每一列，添加两个属性：

<itemstyle width="  ? px" />

<headerstyle width="  ? px " />

这两个属性中的？一定需要是一样的，否则会出问题，比如表头内容过小，显示不全等等问题。上述这些，对于表格并不怎么大的项目来说，其实也就差不多了，但是对于表，表格的列，将近有25~30个之多，这个时候，这样的做法，让我的额表头和内容对不上，产生了错位。我发现，如果仅仅是简单的把gridview原来的表头删除掉，留下表体，会出现标题和内容的错位。那么我解决的方法，是沿用了网络上的这个方法，加以自己改进了一些：

function init()
{
var bodyGridView = document.getElementById("<%=GridView1.ClientID%>");
var headGridView= bodyGridView.cloneNode(true);
var divhead = document.getElementById("headdiv");
var divbody = document.getElementById("bodydiv");
divhead.appendChild(headGridView);
/*************************************到此位置的东西都是和上面一样的，就不加注释了*****************************************/
divhead.style.width = divbody.clientWidth+'px';
divbody.style.height = document.body.clientHeight-100+'px';   //这两行是用来确定我的页面中两个div的高度的，如果不是有什么特殊需求，可以不写这两行。
}
window.onload = init;

到此为止，其实可能并没有什么用。但是不着急，因为程序上的改进，也就到此为止了，剩下来的，我交给了css外部层叠样式表。我的gridview的cssClass为gdv以及header-cssClass为header：

.gdv
{
width:2000px;
height:16px;
text-align:center;
background-color:White;
margin-top:-40px;
font:normal normal normal 14px/16px 宋体,Arial,幼圆;
display:table;
}
.header
{

border:1px solid lightblue;
height:40px;
line-height:40px;
}

注意gdv中的margin-top和header中的height属性，是比较重要的，我的方法不是删除第一行，而是第一行上移，那么这样就能保持第一行依然存在，这样，就不会造成标题和内容错位了，但是又随之而来一个问题，

请注意，这里

divTitle.appendChild(headGridView);

并没有把表头内容放在divTitle内。注意，其实不是没有放，放了，但是因为headGridView是通过cloneNode方法获得的一模一样的html，所以，继承了所有的css样式表，这个时候，我重新添加了一个样式，不过不改样式的名字，只改样式的归属：

#divTitle.gdv
{
margin-top:0px;
}

这样，就将原来缩上去的表头在id为divTitle的div内，拉下来显示在界面中。这样也就将表头和表体完美的分离开来了。同时，希望大家能提出不一样的，更为简洁的方法，共同进步！如果有哪里写错了，请大家原谅。疯狂码代码中。