• (转)GridView固定表头


    固定表头方法:

    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; 978px; border:0px solid red;"></div>
    <div id="divGvData" runat="server" style="position:relative; top:0px; left:0px; overflow:scroll; 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



    作者:Jack Qin 互联网新鲜事:http://www.nosqlcn.com
  • 相关阅读:
    MySQL之数据表的插入内容 空与非空(六)
    输出杨辉三角形
    输入三个double型的数据,放入到a,b,c三个变量中去,使用条件结构与交换逻辑将这三个变量中的值从小到大排列。
    软件测试
    过程设计工具
    设计原理
    总体设计
    生活,也让别人生活
    计算器案例
    需求分析
  • 原文地址:https://www.cnblogs.com/JackQ/p/2109748.html
Copyright © 2020-2023  润新知