GridView固定表头和排序功能

GridView固定表头功能，兼容IE6,IE7,IE8,firefox

先设置GridView现实表头ShowHeader="True",并且让GridView使用 UseAccessibleHeader 属性来指定数据列表控件是否以可访问的格式呈现其标头

代码

protected   void  GridView1_PreRender( object  sender, EventArgs e)
        {
             this .GridView1.UseAccessibleHeader  =   true ;
             this .GridView1.HeaderRow.TableSection  =  TableRowSection.TableHeader;

        }

 

查看前台解析的HTML文件可以看到

 

代码

< table  cellspacing ="0"  cellpadding ="4"  rules ="cols"  border ="1"  id ="GridView1"  style ="color:Black;background-color:White;border-color:#DEDFDE;border-width:1px;border-style:None;width:100%;border-collapse:collapse;" >
         < thead >
             < tr  style ="color:White;background-color:#6B696B;font-weight:bold;" >
                 < th  scope ="col"  style ="width:30px;" > id </ th >< th  scope ="col"  style ="width:120px;" > productid </ th >< th  scope ="col"  style ="width:100px;" > productname </ th >< th  scope ="col"  style ="width:120px;" > categoryid </ th >< th  scope ="col"  style ="width:120px;" > strggxh </ th >< th  scope ="col"  style ="width:150px;" > createtime </ th >< th  scope ="col" > strdesc </ th >
             </ tr >
         </ thead >< tbody >

 

拷贝<thead>里面的东西作为新的表头

 

代码

   < table  cellspacing ="0"  cellpadding ="4"  rules ="cols"  border ="1"  id ="GridView11"  style ="color: Black;
    background-color: White; border-color: #DEDFDE; border-width: 1px; border-style: None;
    width: 100%; border-collapse: collapse; " >
     < thead >
       < tr  style ="color: White; background-color: #6B696B; font-weight: bold;" >
         < th  scope ="col"  style ="width: 30px;" >
           < a  href ="javascript:sortTable(0)" > id </ a >
         </ th >
         < th  scope ="col"  style ="width: 120px;" >
            < a  href ="javascript:sortTable(1)" > productid </ a >
         </ th >
         < th  scope ="col"  style ="width: 100px;" >
            < a  href ="javascript:sortTable(2)" > productname </ a >
         </ th >
         < th  scope ="col"  style ="width: 120px;" >
            < a  href ="javascript:sortTable(3)" > categoryid </ a >
         </ th >
         < th  scope ="col"  style ="width: 120px;" >
            < a  href ="javascript:sortTable(4)" > strggxh </ a >
         </ th >
         < th  scope ="col"  style ="width: 150px;" >
            < a  href ="javascript:sortTable(5)" > createtime </ a >
         </ th >
         < th  scope ="col" >
            < a  href ="javascript:sortTable(6)" > strdesc </ a >
         </ th >
       </ tr >
     </ thead >
   </ table >

 

接着让GRIDVIEW 属性ShowHeader="False",  在gridview外面放置一个div,实现滚动功能

 

代码

   < div  style ="height: 480px; width: 100%; overflow: auto;" >
     < asp:GridView  ID ="GridView1"  runat ="server"  AutoGenerateColumns ="False"
      BackColor ="White"  BorderColor ="#DEDFDE"  BorderStyle ="None"  BorderWidth ="1px"  CellPadding ="4"
      DataKeyNames ="id"   ForeColor ="Black"  GridLines ="Vertical"
      OnPreRender ="GridView1_PreRender"  Width ="100%" >
       < RowStyle  BackColor ="#F7F7DE"   />
       < Columns >
         < asp:BoundField  DataField ="id"  HeaderText ="id"  InsertVisible ="False"  ReadOnly ="True"
          SortExpression ="id"  HeaderStyle-Width ="30px"  ItemStyle-Width ="30px" >
           < HeaderStyle  Width ="30px" ></ HeaderStyle >
           < ItemStyle  Width ="30px" ></ ItemStyle >
         </ asp:BoundField >
         < asp:BoundField  DataField ="productid"  HeaderText ="productid"  SortExpression ="productid"
          HeaderStyle-Width ="120px"  ItemStyle-Width ="120px" >
           < HeaderStyle  Width ="120px" ></ HeaderStyle >
           < ItemStyle  Width ="120px" ></ ItemStyle >
         </ asp:BoundField >
         < asp:BoundField  DataField ="productname"  HeaderText ="productname"  SortExpression ="productname"
          HeaderStyle-Width ="100px"  ItemStyle-Width ="100px" >
           < HeaderStyle  Width ="100px" ></ HeaderStyle >
           < ItemStyle  Width ="100px" ></ ItemStyle >
         </ asp:BoundField >
         < asp:BoundField  DataField ="categoryid"  HeaderText ="categoryid"  SortExpression ="categoryid"
          HeaderStyle-Width ="120px"  ItemStyle-Width ="120px" >
           < HeaderStyle  Width ="120px" ></ HeaderStyle >
           < ItemStyle  Width ="120px" ></ ItemStyle >
         </ asp:BoundField >
         < asp:BoundField  DataField ="strggxh"  HeaderText ="strggxh"  SortExpression ="strggxh"
          HeaderStyle-Width ="120px"  ItemStyle-Width ="120px" >
           < HeaderStyle  Width ="120px" ></ HeaderStyle >
           < ItemStyle  Width ="120px" ></ ItemStyle >
         </ asp:BoundField >
         < asp:BoundField  DataField ="createtime"  HeaderText ="createtime"  SortExpression ="createtime"
          HeaderStyle-Width ="150px"  ItemStyle-Width ="150px" >
         </ asp:BoundField >
         < asp:BoundField  DataField ="strdesc"  HeaderText ="strdesc"  SortExpression ="strdesc"   />
       </ Columns >
       < FooterStyle  BackColor ="#CCCC99"   />
       < PagerStyle  BackColor ="#F7F7DE"  ForeColor ="Black"  HorizontalAlign ="Right"   />
       < SelectedRowStyle  BackColor ="#CE5D5A"  Font-Bold ="True"  ForeColor ="White"   />
       < HeaderStyle  BackColor ="#6B696B"  Font-Bold ="True"  ForeColor ="White"   />
       < AlternatingRowStyle  BackColor ="White"   />
     </ asp:GridView >
   </ div >

 

HTML完整代码：

 

代码

<% @ Page Language = " C# "  AutoEventWireup = " true "  CodeBehind = " Default.aspx.cs "  Inherits = " KingGridView._Default "   %>
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head  id ="Head1"  runat ="server" >
   < title ></ title >  
   < script  language ="javascript"  src ="scripts/jquery-1.4.1.min.js"  type ="text/javascript" ></ script >
   < script  language ="javascript"  src ="scripts/jquery.tinysort.min.js"  type ="text/javascript" ></ script >
</ head >
< body >
   < form  id ="form1"  runat ="server" >
   < script  language ="javascript"  type ="text/javascript" >
     var  aAsc  =  [];
     function  sortTable(nr) {
      aAsc[nr]  =  aAsc[nr]  ==   ' asc '   ?   ' desc '  :  ' asc ' ;
      $( ' #GridView1>tbody>tr ' ).tsort( ' td:eq( '   +  nr  +   ' ) ' , { order: aAsc[nr] });
    }
   </ script >
   < table  cellspacing ="0"  cellpadding ="4"  rules ="cols"  border ="1"  id ="GridView11"  style ="color: Black;
    background-color: White; border-color: #DEDFDE; border-width: 1px; border-style: None;
    width: 100%; border-collapse: collapse; " >
     < thead >
       < tr  style ="color: White; background-color: #6B696B; font-weight: bold;" >
         < th  scope ="col"  style ="width: 30px;" >
           < a  href ="javascript:sortTable(0)" > id </ a >
         </ th >
         < th  scope ="col"  style ="width: 120px;" >
            < a  href ="javascript:sortTable(1)" > productid </ a >
         </ th >
         < th  scope ="col"  style ="width: 100px;" >
            < a  href ="javascript:sortTable(2)" > productname </ a >
         </ th >
         < th  scope ="col"  style ="width: 120px;" >
            < a  href ="javascript:sortTable(3)" > categoryid </ a >
         </ th >
         < th  scope ="col"  style ="width: 120px;" >
            < a  href ="javascript:sortTable(4)" > strggxh </ a >
         </ th >
         < th  scope ="col"  style ="width: 150px;" >
            < a  href ="javascript:sortTable(5)" > createtime </ a >
         </ th >
         < th  scope ="col" >
            < a  href ="javascript:sortTable(6)" > strdesc </ a >
         </ th >
       </ tr >
     </ thead >
   </ table >
   < div  style ="height: 480px; width: 100%; overflow: auto;" >
     < asp:GridView  ID ="GridView1"  runat ="server"  AutoGenerateColumns ="False"
      BackColor ="White"  BorderColor ="#DEDFDE"  BorderStyle ="None"  BorderWidth ="1px"  CellPadding ="4"
      DataKeyNames ="id"   ForeColor ="Black"  GridLines ="Vertical"
      OnPreRender ="GridView1_PreRender"  Width ="100%" >
       < RowStyle  BackColor ="#F7F7DE"   />
       < Columns >
         < asp:BoundField  DataField ="id"  HeaderText ="id"  InsertVisible ="False"  ReadOnly ="True"
          SortExpression ="id"  HeaderStyle-Width ="30px"  ItemStyle-Width ="30px" >
           < HeaderStyle  Width ="30px" ></ HeaderStyle >
           < ItemStyle  Width ="30px" ></ ItemStyle >
         </ asp:BoundField >
         < asp:BoundField  DataField ="productid"  HeaderText ="productid"  SortExpression ="productid"
          HeaderStyle-Width ="120px"  ItemStyle-Width ="120px" >
           < HeaderStyle  Width ="120px" ></ HeaderStyle >
           < ItemStyle  Width ="120px" ></ ItemStyle >
         </ asp:BoundField >
         < asp:BoundField  DataField ="productname"  HeaderText ="productname"  SortExpression ="productname"
          HeaderStyle-Width ="100px"  ItemStyle-Width ="100px" >
           < HeaderStyle  Width ="100px" ></ HeaderStyle >
           < ItemStyle  Width ="100px" ></ ItemStyle >
         </ asp:BoundField >
         < asp:BoundField  DataField ="categoryid"  HeaderText ="categoryid"  SortExpression ="categoryid"
          HeaderStyle-Width ="120px"  ItemStyle-Width ="120px" >
           < HeaderStyle  Width ="120px" ></ HeaderStyle >
           < ItemStyle  Width ="120px" ></ ItemStyle >
         </ asp:BoundField >
         < asp:BoundField  DataField ="strggxh"  HeaderText ="strggxh"  SortExpression ="strggxh"
          HeaderStyle-Width ="120px"  ItemStyle-Width ="120px" >
           < HeaderStyle  Width ="120px" ></ HeaderStyle >
           < ItemStyle  Width ="120px" ></ ItemStyle >
         </ asp:BoundField >
         < asp:BoundField  DataField ="createtime"  HeaderText ="createtime"  SortExpression ="createtime"
          HeaderStyle-Width ="150px"  ItemStyle-Width ="150px" >
         </ asp:BoundField >
         < asp:BoundField  DataField ="strdesc"  HeaderText ="strdesc"  SortExpression ="strdesc"   />
       </ Columns >
       < FooterStyle  BackColor ="#CCCC99"   />
       < PagerStyle  BackColor ="#F7F7DE"  ForeColor ="Black"  HorizontalAlign ="Right"   />
       < SelectedRowStyle  BackColor ="#CE5D5A"  Font-Bold ="True"  ForeColor ="White"   />
       < HeaderStyle  BackColor ="#6B696B"  Font-Bold ="True"  ForeColor ="White"   />
       < AlternatingRowStyle  BackColor ="White"   />
     </ asp:GridView >
   </ div >
   </ form >
</ body >
</ html >

 

后台代码：

 

代码

using  System;
using  System.Collections.Generic;
using  System.Linq;
using  System.Web;
using  System.Web.UI;
using  System.Web.UI.WebControls;
using  System.Data;
namespace  KingGridView
{
     public   partial   class  _Default : System.Web.UI.Page
    {
         protected   void  Page_Load( object  sender, EventArgs e)
        {
             if  ( ! Page.IsPostBack)
            {
                 this .GridView1.DataSource  =  GetProducts();
                 this .GridView1.DataBind();
            }
        }
         private  ProductCollection GetProducts()
        {
            ProductCollection _pc  =   new  ProductCollection();
             for  ( int  i  =   1 ; i  <   100 ; i ++ )
            {
                _pc.Add(
                     new  Product { id  =  i.ToString(), categoryid  =  i.ToString(), createtime  =  System.DateTime.Now.ToString(),
                    productid  =  i.ToString(), productname  =  i.ToString(), strdesc  =  i.ToString(), strggxh  =  i.ToString() }
                    );
            }
             return  _pc;

        }
         protected   void  GridView1_PreRender( object  sender, EventArgs e)
        {
             this .GridView1.UseAccessibleHeader  =   true ;
             this .GridView1.HeaderRow.TableSection  =  TableRowSection.TableHeader;

        }
    }
     public   class  ProductCollection : ICollection < Product >
    {
        List < Product >  _Products;
         public  ProductCollection()
        {
            _Products  =   new  List < Product > ();
        }
         #region  ICollection<Product> Members

         public   void  Add(Product item)
        {
            _Products.Add(item);
        }

         public   void  Clear()
        {
            _Products.Clear();
        }

         public   bool  Contains(Product item)
        {
             return  _Products.Contains(item);
        }

         public   void  CopyTo(Product[] array,  int  arrayIndex)
        {
             throw   new  NotImplementedException();
        }

         public   int  Count
        {
             get  {  return  _Products.Count; }
        }

         public   bool  IsReadOnly
        {
             get  {  return   true ; }
        }

         public   bool  Remove(Product item)
        {
             return  _Products.Remove(item);
        }

         #endregion

         #region  IEnumerable<Product> Members

         public  IEnumerator < Product >  GetEnumerator()
        {
             return  _Products.GetEnumerator();
        }

         #endregion

         #region  IEnumerable Members

        System.Collections.IEnumerator System.Collections.IEnumerable.GetEnumerator()
        {
             return  _Products.GetEnumerator();
        }

         #endregion
    }
     public   class  Product
    {
         public   string  id
        {
             get ;
             set ;
        }
         public   string  productid
        {
             get ;
             set ;
        }
         public   string  productname
        {
             get ;
             set ;
        }
         public   string  categoryid
        {
             get ;
             set ;
        }
         public   string  strggxh
        {
             get ;
             set ;
        }
         public   string  createtime
        {
             get ;
             set ;
        }
         public   string  strdesc
        {
             get ;
             set ;
        }
    }
}