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; 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;" οnscrοll="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>