gridview表头固定（经验篇）

最新推荐文章于 2019-02-21 17:37:00 发布

原创

最新推荐文章于 2019-02-21 17:37:00 发布 · 6.7k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#web前端 #gridview表头固定 #gridview #css #c#

本文主要介绍了在Web前端开发中，解决GridView表头固定的问题。当表格内容滚动时，保持表头可见，避免反复对比表头和内容。文章详细阐述了实现步骤，包括后端添加特定样式、前后端分离思想、以及CSS调整。通过调整GridView的table-layout属性，创建独立的div分别存放表头和内容，并结合JavaScript和CSS解决宽高匹配和错位问题。

这里先介绍一下我的项目中遇到的一个问题，这个问题各种项目中也是用的最多的一个，那就是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 headGridVie

最低0.47元/天解锁文章