GridView或DataGrid 固定表头,滚动数据的例子.

1.主要利用table style的 layout=fixed属性按照当前表头再copy一个table,显示在当前datagrid或gridview的前面.

2.注意:调用的时候,datagrid 或gridview       要有style="table-layout:fixed" 和 width=?? 属性.

  另外还有个自定义属性 viewheight 是可选,表示滚动内容区域的高度

  脚本中更改一下DataGrid或GridView的ID即可.

  该示例在IE7 和 FireFox下测试通过.

以下是示例:

 <asp:GridView style="table-layout:fixed"  viewheight="100"  ........

 

DoScrollTable("GridView1");

function DoScrollTable(id)

 {

     var tb = document.getElementById(id);

     var eNext = tb.nextSibling;

     

     var th = tb.cloneNode(true)

        

     

     //记录宽度

     var ary  = new Array();

     var width = tb.offsetWidth;

     var height = tb.offsetHeight;

     for(var i=0;i<tb.rows[0].cells.length;i++)

     {

        ary[i] = tb.rows[0].cells[i].offsetWidth;

     }

     

     while(true && th.rows.length>1)

     {

         th.deleteRow(1);

     }

    

     tb.deleteRow(0)

     

     var divHeader = document.createElement("div");

     var divBody = document.createElement("div");

     tb.parentNode.replaceChild(divHeader,tb);

     divHeader.appendChild(th);

     if(eNext)

     {

        divHeader.parentNode.insertBefore(divBody,eNext);

     }else

     {

        divHeader.parentNode.appendChild(divBody);

     }

     divBody.appendChild(tb);

     divHeader.style.cssText = "width:100%;overflow:hidden";

     if(!document.all)

     {

       // divHeader.style.cssText = "width:"+(divBody.offsetWidth-20)+"px";

         

        th.width = divBody.offsetWidth-16;

     }

     

     divBody.style.cssText = "width:100%;overflow-y:auto;overflow-x:hidden;height:"+tb.getAttribute("viewheight") +"px";

     th.style.cssText ="table-layout:fixed"

     tb.style.cssText ="table-layout:fixed"

     

     if(parseInt(tb.getAttribute("viewheight").replace(/px/gi,"")) > height)

     {

        divBody.style.height = height;

     }

     //th.width =  null;

     if(tb.rows.length>0)

      {

        var tr1 = tb.rows[0];

        var th0 = th.rows[0];

        //th0.className = null;

        for(var i=0 ;i<tr1.cells.length;i++)

        {   

            th0.cells[i].style.width = ary[i];

            tr1.cells[i].style.width = ary[i];

            if(!document.all)

            {

                th0.cells[i].width = ary[i];

                 tr1.cells[i].width = ary[i];

            }

        }

     }

     

     

      

     

     

     //alert(th.rows[0].cells[0].offsetWidth);

     //alert(tb.rows[0].cells[0].offsetWidth);

     //tb.rows[0].cells[0].style.width = "627px"

     //alert(tb.rows[0].cells[0].offsetWidth);

}