XP 风格的可拖动列、可排序、可改变宽度的DataGrid的例子

UltraGrid.aspx

<% @ Page Language = " c# "  EnableViewState = " false "  AutoEventWireup = " true "  ResponseEncoding = " GB2312 "   %>

<% @ Import Namespace = " System.Data "   %>
<% @ Import Namespace = " System.Data.OleDb "   %>
<! DOCTYPE HTML PUBLIC  " -//W3C//DTD HTML 4.0 Transitional//EN "   >

< script runat = " server " >
   void  Page_Load(  object  sender, System.EventArgs e )
   ... {
    coolUltraGrid1.Attributes.Add("class", "coolUltraGrid");
    coolUltraGrid1.Attributes.Add("style", "WIDTH: 100%; HEIGHT: 400");
    coolUltraGrid1.Attributes.Add("borderStyle", "2");
    coolUltraGrid1.Attributes.Add("altRowColor", "oldLace");
    coolUltraGrid1.Attributes.Add("selectionStyle", "1");
    OleDbConnection cn = new OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + HttpContext.Current.Server.MapPath("Web.mdb"));
    cn.Open();
    OleDbCommand cmd = new OleDbCommand("SELECT  id, Title As 文档标题,CreateDate as 发布时间,Author AS 作者 FROM Document ORDER BY id DESC", cn);
    OleDbDataReader dr;
    dr = cmd.ExecuteReader(CommandBehavior.CloseConnection);
    /**////
    ///组合表头
    ///
    int FieldNumber = dr.FieldCount;
    int ColWidth, Tmp = 0;
    if (FieldNumber == 0)
      Response.End();
    ColWidth = (int)100 / FieldNumber;
    string TableHeader = "";
    for (int i = 0; i < FieldNumber; i++)
    ...{
      if (dr.Read())
      ...{
        if (i == FieldNumber - 1)
          TableHeader += "<span width='" + (100 - Tmp).ToString() + "%'>" + dr.GetName(i).ToString() + "</span>";
        else
          TableHeader += "<span width='" + ColWidth.ToString() + "%'>" + dr.GetName(i).ToString() + "</span>";
        Tmp += ColWidth;
      }
    }
    gridRow.InnerHtml = TableHeader;
    int RowNumber = 1;
    TableHeader = "<div class='gridBody'>";
    while (dr.Read())
    ...{
      TableHeader += "<div  class='gridRow'  id='row" + RowNumber.ToString() + "'>";
      for (int i = 0; i < FieldNumber; i++)
      ...{
        TableHeader += "<span>" + dr.GetValue(i).ToString() + "</span>";
      }
      TableHeader += "</div>";
      RowNumber++;
    }
    TableHeader += "</div>";
    RowItem.Text = TableHeader;
    cn.Close();

  }
</ script >

< html >
< head >
   < title > 例子 </ title >
   < meta http - equiv = " Content-Type "  content = " text/html; charset=gb2312 "   />
   < link rel = " stylesheet "  type = " text/css "  href = " UltraGrid.css " >
</ head >
< body >
   < table height = " 575 "  cellspacing = " 0 "  cellpadding = " 0 "  width = " 81 "  border = " 0 " >
     < tr valign = " top " >
       < td width = " 81 "  height = " 575 " >
         < form id = " DragableXpStyleTable "  method = " post "  runat = " server " >
           < table height = " 64 "  cellspacing = " 0 "  cellpadding = " 0 "  width = " 563 "  border = " 0 " >
             < tr valign = " top " >
               < td width = " 10 "  height = " 15 " >
               </ td >
               < td width = " 553 " >
               </ td >
             </ tr >
             < tr valign = " top " >
               < td height = " 29 " >
               </ td >
               < td >
                 < div align = " center " >
                   < b >& nbsp;XP 风格的可拖动列、可排序、可改变宽度的DataGrid的例子。 </ b ></ div >
               </ td >
             </ tr >
             < tr valign = " top " >
               < td height = " 20 " >
               </ td >
               < td >
                 < div id = " coolUltraGrid1 "  runat = " server " >
                   < div  class = " gridHead " >
                     < div  class = " gridRow "  id = " gridRow "  runat = " server " >
                     </ div >
                   </ div >
                   < asp:Literal ID = " RowItem "  runat = " server " ></ asp:Literal >
                 </ div >
               </ td >
             </ tr >
           </ table >
         </ form >
       </ td >
     </ tr >
   </ table >
</ body >
</ html >