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-1px;border-style:None;100%;border-collapse:collapse;">
        <thead>
            <tr style="color:White;background-color:#6B696B;font-weight:bold;">
                <th scope="col" style="30px;">id</th><th scope="col" style="120px;">productid</th><th scope="col" style="100px;">productname</th><th scope="col" style="120px;">categoryid</th><th scope="col" style="120px;">strggxh</th><th scope="col" style="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- 1px; border-style: None;
     100%; border-collapse: collapse; ">
    <thead>
      <tr style="color: White; background-color: #6B696B; font-weight: bold;">
        <th scope="col" style=" 30px;">
          <a href="javascript:sortTable(0)">id</a>
        </th>
        <th scope="col" style=" 120px;">
           <a href="javascript:sortTable(1)">productid</a>
        </th>
        <th scope="col" style=" 100px;">
           <a href="javascript:sortTable(2)">productname</a>
        </th>
        <th scope="col" style=" 120px;">
           <a href="javascript:sortTable(3)">categoryid</a>
        </th>
        <th scope="col" style=" 120px;">
           <a href="javascript:sortTable(4)">strggxh</a>
        </th>
        <th scope="col" style=" 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;  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- 1px; border-style: None;
     100%; border-collapse: collapse; ">
    <thead>
      <tr style="color: White; background-color: #6B696B; font-weight: bold;">
        <th scope="col" style=" 30px;">
          <a href="javascript:sortTable(0)">id</a>
        </th>
        <th scope="col" style=" 120px;">
           <a href="javascript:sortTable(1)">productid</a>
        </th>
        <th scope="col" style=" 100px;">
           <a href="javascript:sortTable(2)">productname</a>
        </th>
        <th scope="col" style=" 120px;">
           <a href="javascript:sortTable(3)">categoryid</a>
        </th>
        <th scope="col" style=" 120px;">
           <a href="javascript:sortTable(4)">strggxh</a>
        </th>
        <th scope="col" style=" 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;  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;
        }
    }
}