固定表头方法:

1,样式固定。

这个方法是从网上参考的,但是忘记了来源,使用之后发现效果不是很好,有闪动。以下是源码(来源于网络):


<style type="text/css"> 
    .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>

2,Javascript方法。

也是网上参考,搜索应该比较多,据网友回帖说是效果很好,自己使用效果不好。以下是源码分析:

//创建表头
    if(document.getElementById("gvTitle") == null)
    {
        var gdvList = document.getElementById("gvCommon");
        var gdvHeader = gdvList.cloneNode(true);
        for(i = gdvHeader.rows.length - 1; i > 0;i--)
        {
            gdvHeader.deleteRow(i);
        }
        document.getElementById("divTitle").appendChild(gdvHeader);

gdvList.deleteRow(0);

//gdvList.rows[0].style.display = 'none';
    }

使用这个JS方法后,我要继续在JS中访问这个GridView,但是发现GridView的只剩表头行了,数据行都访问不到,原因就是那个

for循环已经删除掉了。

还有其他问题,gdvList.deleteRow(0)这一句代码把第一行表头删除了,如果我用JS方法要在GridView里面添加一行,而正好是在第一行添加的话,那个新添加行的列宽会失去约束,变的错乱。

而如果使用gdvList.rows[0].style.display = 'none'这一行代码,列宽是不会错乱,但奇怪的问题出现了,就是表头跟下面的数据行的列宽对不齐,很是纳闷???

3,还是Javascript方法。也是项目中最后使用的方法。

//创建表头
    if(document.getElementById("gvTitle") == null)
    {
        var gdvList = document.getElementById("gvCommon");
        var gdvHeader = gdvList.cloneNode(true);
        gdvHeader.id = "gvTitle";
        for(i = gdvHeader.rows.length - 1; i > 0;i--)
        {
            gdvHeader.deleteRow(i);
        }
        document.getElementById("divTitle").appendChild(gdvHeader);
        var div = document.getElementById("divGvData");
        var tbl = document.getElementById("divTitle");
        tbl.style.position = "absolute";
        tbl.style.zIndex = 100;
        tbl.style.top = div.offsetTop;
        tbl.style.left = div.offsetLeft;
    }

大致做法是利用JS方法Copy出一个表头 gdvHeader 放在一个“divTitle”的DIV中。

GridView是包含在“divGvData”DIV中的,然后设置divTitle的页面位置和divGvData的一致,也就是覆盖在上面。 目前发现效果还行。有一点要注意,gdvHeader.id = "gvTitle";要重新设置一个ID,不然删除的还是GridView的数据行。

HTML中的部分代码:

<div id="divTitle" style="position:relative; top:0; left:0; overflow:hidden; width:978px; border:0px solid red;"></div>
<div id="divGvData" runat="server" style="position:relative; top:0px; left:0px; overflow:scroll; width:994px;height:450px;" onscroll="funGrilViewScroll(); return false;">
            <asp:GridView ID="gvCommon" style="position:relative; top:0px; left:0px;" runat="server" CssClass="gvFixd" BackColor="White" BorderColor="#999999" BorderStyle="None" BorderWidth="1px" CellPadding="3" AutoGenerateColumns="False" GridLines="Vertical" PageSize="5" AllowSorting="True" OnSorting="gvCommon_Sorting"  >
                <FooterStyle BackColor="#CCCCCC" ForeColor="Black" />
                <RowStyle BackColor="#E7E7FF" ForeColor="Black" Font-Size="Small" />
                <HeaderStyle HorizontalAlign="Center" BackColor="#000084" BorderColor="White" BorderWidth="1px" BorderStyle="Solid" Font-Bold="True" ForeColor="White"/>
                </asp:GridView>
</div>

4, 还有一种asp.net方法,我没有测试过


protected void InitGridviewHeader(GridView _gv1, Table _tb1, Panel _pc1)
        {
            //Page.EnableViewState = false;

//[Espa駉l]Copiando las propiedades del renglon de encabezado
            //[English]Coping a header row data and properties    
            _tb1.Rows.Add(_gv1.HeaderRow);
            _tb1.Rows[0].ControlStyle.CopyFrom(_gv1.HeaderStyle);
            _tb1.CellPadding = _gv1.CellPadding;
            _tb1.CellSpacing = _gv1.CellSpacing;
            _tb1.BorderWidth = _gv1.BorderWidth;

//if (!_gv1.Width.IsEmpty)
            //_gv1.Width = Unit.Pixel(Convert.ToInt32(_gv1.Width.Value) + Convert.ToInt32(_tb1.Width.Value) + 13);

//[Espa駉l]Copiando las propiedades de cada celda del nuevo encabezado.
            //[English]Coping  each cells properties to the new header cells properties
            int Count = 0;
            _pc1.Width = Unit.Pixel(100);
            for (Count = 0; Count < _gv1.HeaderRow.Cells.Count - 1; Count++)
            {
                _tb1.Rows[0].Cells[Count].Width = _gv1.Columns[Count].ItemStyle.Width;
                _tb1.Rows[0].Cells[Count].BorderWidth = _gv1.Columns[Count].HeaderStyle.BorderWidth;
                _tb1.Rows[0].Cells[Count].BorderStyle = _gv1.Columns[Count].HeaderStyle.BorderStyle;
                _pc1.Width = Unit.Pixel(Convert.ToInt32(_tb1.Rows[0].Cells[Count].Width.Value) + Convert.ToInt32(_pc1.Width.Value) + 14);
            }
            //Panel1.Width = Unit.Pixel(Convert.ToInt32(_tb1.Rows[0].Cells[Count-1].Width.Value) + 12);
        }

From: http://www.cnblogs.com/bluewind2879/archive/2008/09/25/1298707.html


http://blog.csdn.net/Samanthaqu/archive/2007/12/04/1915667.aspx

GridView固定表头和首列

当GridVIew中要显示的数据非常多的时候,用户常需要开发人员固定表头或是首列,以保证在拖动滚动条的时候,可以清楚得了解到每一列或行的内容。 借助于CSS的功能,可以将GridView打造成这样的表格:

首先,要把GridView放在一个<asp:Panel runat=server ID="panel">容器中,然后在页面中添加如下CSS:

.fixedheader 
{     
    position:relative ; 
    table-layout:fixed;
    top:expression(this.offsetParent.scrollTop -1);   
    z-index: 10;
}

.fixedheader th{text-overflow:ellipsis;overflow:hidden;white-space: nowrap;}

最后将GridView的HeaderStyle属性集中的CssClass属性设为"fixedheader":

<HeaderStyle Wrap="False" CssClass="fixedheader" />

上述这种方法是以页面的滚动条为基准,因此是“this.offsetParent.scrollTop”,实际使用时可以根据需要尝试其他调整方法

至于固定左边列的方法与此类似

.fixedLeft
{     
    position: relative; 
     left:expression (this.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.scrollLeft-4);    
     z-index:10;

其中 expression后的parentElement到底要多少个,需要设置Debugger自己去跟踪。同时,还要记住设置GridView的背景色, 即便是白色也要设:#FFFFFF,不能为透明。最后,将GridView的ItemStyle中的CssClass设为"fixedLeft" ,便可得到效果了。


固定GridView的表头和某几列

从一个老外的blog上看到了这个例子,自己修改一下,做个GridView的Demo. 共享给大家。
FixedHeader_Demo.rar



转载于:https://www.cnblogs.com/JackQ/archive/2011/07/18/2109748.html

(转)GridView固定表头相关推荐

  1. 固定表头和首行_Excel一步制作斜线表头!还有这些高分Excel表头技巧,看完秒会...

    大家做Excel表格的时候,应该都会遇到一些要用到特殊表头的情况吧,比如双栏斜线表头.三栏斜线表头.还有合并多个单元格居中文字的表头,这些操作其实都很简单,10秒都不用就能搞定. 1.两栏表头 先来说 ...

  2. axure中怎么做出固定首行_Excel:固定表头的方法

    Hi,大家好,我们今天讲一下常用的固定表头或者首列的方法,方便翻页时看到首行首列等. 一.功能 将用户需要的行或列进行固定,方便翻页观看. 二.表示 使用视图菜单里的冻结窗格按钮. 三.简单应用 场景 ...

  3. element table固定表头,表的高度自适应解决方法

    element table固定表头,表的高度自适应解决方法 参考文章: (1)element table固定表头,表的高度自适应解决方法 (2)https://www.cnblogs.com/muou ...

  4. php中表头不跟着滑动,JS实现table表格固定表头且表头随横向滚动而滚动

    这篇文章主要介绍了JS实现table表格固定表头且表头可以随横向滚动而滚动,对js的朋友可以参考下本篇文章 先看一张效果图 思路: 1.头部用一个table并用一个p包裹着, 表格的具体内容用一个ta ...

  5. 【ElementUI】 table表格尾部的合计行,固定表头却不显示合计行

    背景 按照官网要求 不固定表头,添加show-summary就可以显示合计行 问题 但是给table加了一个固定高度之后,就不显示了, 打开控制台可以看到这个合计是存在的 那么需要做两步,合计即可出现 ...

  6. antd 设置表头属性_纯css实现固定表头和锁定列

    ### table 表格是一个网站很常用的元素,用以展示大量的数据.在处理表格时,通常会加入许多功能,如斑马线.选中高亮.固定表头.锁定列等等,本篇文章主要介绍如何单纯的使用css实现固定行或列的功能 ...

  7. antd 设置表头属性_解决react使用antd table组件固定表头后,表头和表体列不对齐以及配置fixed固定左右侧后行高度不对齐...

    一.固定表头后表体列和表头不对齐 此问题可能在antd3.24.0版本之前都存在,反正3.16.2版本是存在这个问题的,如果是3.24.0之前的版本估计只能通过修改css样式解决. 按照官网说的: 1 ...

  8. antd table动态表头_解决react使用antd table组件固定表头后,表头和表体列不对齐以及配置fixed固定左右侧后行高度不对齐...

    1.固定表头后表体列和表头不对齐 此问题可能在antd3.24.0版本以前都存在,反正3.16.2版本是存在这个问题的,若是是3.24.0以前的版本估计只能经过修改css样式解决.css 按照官网说的 ...

  9. React开发(230):ant design table固定表头

    固定表头 方便一页内展示大量数据.需要指定 column 的 width 属性,否则列头和内容可能不对齐. 如果指定 width 不生效或出现白色垂直空隙, 请尝试建议留一列不设宽度以适应弹性布局,或 ...

  10. excel冻结窗口_excel成绩表怎么固定表头或者某一行?

    当浏览成绩表时,很多人都会有这种困扰,就是好不容易找到自己的名字后,却又要往上翻看一下这个成绩对应的科目是什么,才能知道自己的各科成绩分别是多少.怎样才能固定表头或者某一行,不用来回浏览就可以轻松看到 ...

最新文章

  1. CentOS 6.6安装Xtrabackup RPM提示缺少libev.so.4()
  2. vim程序编译器使用(整理)
  3. prefuse学习(二)显示一张图
  4. 接口映射的实现及原理
  5. matlab数组存字符串,MATLAB字符串数组存储为CSV格式
  6. DevExpress之TreeList节点绑定图片
  7. FragmentActivity和Activity的具体区别
  8. 云南省行政村谷歌图层_云南省基本农田划定工作实施细则
  9. HTML5 footer元素
  10. com.android.mms 占cpu,怎么CPU占用这么高啊!
  11. linux ftp 查找文件,Linux shell ftp命令根据文件日期下载文件的方法
  12. AIR-Android开发外部数据访问与存储
  13. 神经网络进行自然语言处理最佳实践
  14. 改变MyEclipse默认编码方式
  15. 网络安全信息收集的思路
  16. 基于时空融合的高效率多阶段视频降噪方法-EMVD
  17. 智慧工地农民工实名制管理系统
  18. 计算机共享打印怎么设置密码,共享打印机需要密码的解决方法
  19. kktv电视剧鸿蒙,KKTV K70系列新品上市 京东、天猫、苏宁易购同步预售
  20. 65.(cesium篇)cesium单个地图图片

热门文章

  1. Thinkphp在Nginx服务器下部署的问题--宝塔面板篇
  2. 选择编程语言前需要知道的事
  3. Oracle Shared Pool优化思路
  4. binlog 分析及回滚神器Analysisbinlog
  5. linux命令(43):awk的使用技巧
  6. OVM-V1.2正式发布,新增实时监控功能,支持一键升级
  7. DNS***泛滥 网络安全迫在眉睫
  8. 20151026作业
  9. everything is nothing
  10. 第五讲 python函数